使用 Emotion css 将图像添加到按钮

Posted

技术标签:

【中文标题】使用 Emotion css 将图像添加到按钮【英文标题】:Adding image to button using Emotion css 【发布时间】:2020-05-04 19:07:55 【问题描述】:

我想设置两个按钮的样式:使用情感 css 的图像向上和向下,但无法这样做。目前,我通常在函数中设置元素的样式。如何使用情感 css 实现这一目标? 我关注了https://emotion.sh/docs/introduction,但我无法以正确的方式实现它。

    import up from "../img/up.png";

    function PostButton(props) 
    let style = 
    backgroundRepeat: 'no-repeat',
    background: `url($up)`,
    paddingRight: 24,
    paddingTop: 26,
    paddingLeft: 26,
    paddingBottom: 26.6
    ;
    return (
    <button style=style onClick=() => props.handleClick()>props.background</button>
    );
    

//I have written similar code for PostButton2


function Post(props) 
    return (
    <div>
                    <Up >
                        <PostButton src="../images/up.png" handleClick= . 
     props.incrementScore />
                    </Up>                    >

                    <Down >
                        <PostButton2 src="../images/down.png" 
 handleClickprops.decrementScore />
                    </Down>
                </Col>
            </Row>
        </Container>
    </div>
    );
 

【问题讨论】:

【参考方案1】:

假设 src 属性包含背景图片,我认为您需要更新背景才能使用这样的道具:

background: `url($props.src)`,

【讨论】:

【参考方案2】:

使用 src 属性作为图像的路径。

// First way, with css from emotion/react

/** @jsx jsx */
import  jsx, css  from '@emotion/react'

const PostButton = ( background, handleClick, src ) => (
  <button css=css`
    background: $`no-repeat url($src)`;
    padding: 26px 24px 26.6px 26px;
  ` 
  onClick=handleClick>background</button>
)

// Second way, with css from emotion/css

import React from 'react'
import  css  from '@emotion/css'

const PostButton = ( background, handleClick, src ) => (
  <button className=css`
    background: $`no-repeat url($src)`;
    padding: 26px 24px 26.6px 26px;
  ` 
  onClick=handleClick>background</button>
)

// Third way, with css from emotion/css, but pass styles as object

import React from 'react'
import  css  from '@emotion/css'

const PostButton = ( background, handleClick, src ) => (
  <button className=css(
    background: `no-repeat url($src)`,
    padding: '26px 24px 26.6px 26px'
  ) 
  onClick=handleClick>background</button>
)

【讨论】:

以上是关于使用 Emotion css 将图像添加到按钮的主要内容,如果未能解决你的问题,请参考以下文章

使用css将鼠标悬停在按钮上时如何更改站点背景图像?

使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式

在 CSS/HTML 中为导航栏上的按钮添加图像

例如微博表情添加到textView中

如何使用 Emotion CSS 函数传递道具

CSS按钮在悬停期间不改变颜色(css和html)