样式化组件：使用css根据值添加颜色

我有一个下拉组件，看起来像这样

源代码：

const DropdownSelectPriority = props => {
  const { multiChoiceArray } = props
  return (
    <ButtonContainer>
      {multiChoiceArray.map(questionChoice => {
        return (
          <div key={questionChoice.id}>
            <p>{questionChoice.text}</p>
            <SimpleSelect
              placeholder="Select a priority"
              onValueChange={value => console.log(value)}
            >
              {questionChoice.options.map(options => {
                return <option value={options.label}>{options.value}</option>
              })}
            </SimpleSelect>
          </div>
        )
      })}
    </ButtonContainer>
  )
}

const DropdownSelectPriority=props=>{
常量{multiChoiceArray}=props
返回(
{multiChoiceArray.map（questionChoice=>{
返回(
{questionChoice.text}

console.log（值）}
>
{questionChoice.options.map（选项=>{
返回{options.value}
})}
)
})}
)
}

---

我想根据所选的值来设计我的div，我如何才能做到这一点？例如，如果水质管理是最高优先级，我想添加一些样式等，只需使用背景属性设置一个通用的

选项

：

const Select = styled.select`
  background: ${({ bg }) => bg};
`;

const Option = styled.option`
  background: ${({ bg }) => bg};
`;

const options = ['red', 'green', 'blue'];

const App = () => {
  const [selected, setSelected] = useState('red');
  return (
    <Select
      value={selected}
      onChange={e => setSelected(e.target.value)}
      bg={selected}
    >
      {options.map(option => (
        <Option key={option} value={option} bg={option}>
          {option}
        </Option>
      ))}
    </Select>
  );
};

const Select=styled.Select`
背景：${（{bg}）=>bg}；
`;
const Option=styled.Option`
背景：${（{bg}）=>bg}；
`;
常量选项=[“红色”、“绿色”、“蓝色”]；
常量应用=（）=>{
const[selected，setSelected]=useState（'red'）；
返回(
setSelected（e.target.value）}
bg={selected}
>
{options.map（option=>(
{option}
))}
);
};

---

您是否尝试阅读文档？这基本上是样式化组件的主要功能是我做的，但我不确定如何为每个

{options.value}

Hmm应用样式，不完全是我想要的…如果我想要

background:palevioletred

是动态的，而不是下拉项？那么向其中添加状态为什么需要状态？在您的代码笔中，您没有使用state for

{option}

来使用动态颜色。这不是必需的，您也可以使用引用，从现在起，这不是样式化组件的问题，而是简单的反应。我添加了一个state示例