样式化组件有条件地渲染背景颜色

Question

我认为这段代码不言自明：

const TheSearchForm = styled.form`
input[type="text"]:focus {
${({ navItemsColor }) =>
navItemsColor == "white" && {
backgroundColor: "black",
}}
}`;

因此，当navItemsColor为"0"时；白色"；我希望CCD_ 2是"；黑色"；反之亦然，但此代码不起作用。

我也试过：

const TheSearchForm = styled.form`
input[type="text"]:focus {
background-color: ${({ navItemsColor }) =>
navItemsColor === "white" ? "black" : "white"}
}`;

有什么帮助吗？

Answer 1

这是您的代码导致程序自动在的末尾插入一个semicolon

background-color: ${({ navItemsColor }) =>

因此，尽量在语句末尾添加分号。

const TheSearchForm = styled.form`
input[type="text"]:focus {
background-color: ${({ navItemsColor }) =>
navItemsColor === "white" ? "black" : "white"};
}`;