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

Question

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

源代码：

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>
  )
}

我想根据选择的值设置我的 div 样式，我该如何实现？例如，如果水质管理是最高优先级，我想添加一些样式等

Answer 1

只需使用 background 属性设置通用 Option 的样式：

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>
  );
};