在样式组件中有条件地添加背景色

Question

你好，我有下面的代码。我想做一个样式组件，它把backgroundColor作为一个道具。下面的代码不起作用

import { colors } from "styling/variables";
import styled from "@emotion/styled";
const Badge = styled("span")(
{
padding: 5,
borderRadius: 10,
// backgroundColor: colors.red,
color: colors.white,
fontSize: "0.7rem",
marginRight: 10,
width: "60px"
},
props => ({
backgroundColor: props.color
})
);
function Priority() {
return <Badge color={colors.balck}>High</Badge>;
}
export default Priority;

Answer 1

你需要把props传递给Priority样式的组件

function Priority(props) {
return <Badge color={colors.black}>High</Badge>;
}

然后添加props到style:

const Badge = styled.span`
padding: 5,
borderRadius: 10,
// backgroundColor: colors.red,
color: colors.white,
fontSize: "0.7rem",
marginRight: 10,
width: "60px"
backgroundColor: ${p => p.color}
`;

Answer 2

我已经写了下面的代码，你可以看到我已经用props设置了背景色。

import styled from "@emotion/styled";
const variantsBg = {
primary: #fff,
};
const Badge = styled.span`
background: ${props => variantsBg[props.variant]};
`;
export default Badge;
//How you can pass the props in Badge component
<Badge variant="primary" />