gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 20:58:15 25 4
gpt4 key购买 nike

我想设计两个按钮的样式:使用情感 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"}
handleClick{props.decrementScore} />
</Down>
</Col>
</Row>
</Container>
</div>
);
}

最佳答案

假设 src 属性包含背景图像,我认为您需要更新背景以使用 Prop ,如下所示:

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

关于css - 使用 Emotion css 将图像添加到按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59795072/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com