使用情感css向按钮添加图像

我想设计两个按钮：使用情感css的图像上下，但无法做到这一点。目前，我通常在函数中设置元素的样式。如何使用情感css实现这一点？ 我遵循了，但我无法以正确的方式实施

    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"} 
 handleClick{props.decrementScore} />
                    </Down>
                </Col>
            </Row>
        </Container>
    </div>
    );
} 

从“./img/up.png”向上导入；
功能按钮（道具）{
让样式={
背景重复：“不重复”，
背景：`url（${up}）`，
paddingRight:24，
paddingTop:26，
paddingLeft:26，
填充底部：26.6
};
返回(
props.handleClick（）}>{props.background}
);
}
//我已经为PostButton2编写了类似的代码
功能岗（道具）{
返回(
>
);
} 

假设src属性保存背景图像，我认为您需要更新背景以使用道具，如下所示：

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

---

使用src prop作为图像的路径

// 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>
)

//第一种方式，使用来自情感/反应的css
/**@jsx-jsx*/
从'@emotion/react'导入{jsx，css}
const PostButton=（{background，handleClick，src}）=>(
{背景}
)
//第二种方式，使用来自情感的css/css
从“React”导入React
从“@emotion/css”导入{css}
const PostButton=（{background，handleClick，src}）=>(
{背景}
)
//第三种方式，使用emotion/css中的css，但将样式作为对象传递
从“React”导入React
从“@emotion/css”导入{css}
const PostButton=（{background，handleClick，src}）=>(
{背景}
)