如何使用 styled-components 将选项设置为 selected？

Question

如何使用 styled-component 属性 来设置我的样式 option 的 selected 属性 以便选择该选项在 select 元素中取决于 isSelected 属性 是否真实？

现在我有这个：

export const MyOption = styled.option.attrs(props => ({
    selected: {props.isSelected ? "selected" : ""}
})``;

Answer 1

你得到的实际上几乎完全是你如何做的。

您唯一需要更改的是使用 curly-brackets {} 将选定的属性设置为一个对象，而您应该使用普通括号 () 来执行逻辑.

export const MyOption = styled.option.attrs(props => ({ 
    selected: (props.isSelected ? "selected" : ""),
 }))``;