在React.js中使用CSS className设置react-select组件的样式

Question

我正在使用react-select，并且试图像在DOCS中编写的那样对Select组件进行样式设置，但是使用className添加类是行不通的。将class标签添加到DOM元素的类中，但不影响元素本身。主题保持不变。

如果我添加这样的课程：

<Select
    className='my-class'
    {...selectProps}
/>

DOM元素如下：

<div class="my-class css-2b097c-container">
...
</div>

这意味着css-2b097c-container的默认类react-select将始终“覆盖”我的自定义类。 我尝试使用classNamePrefix选项，但是：（

为了使UI设计完整，我需要使用类而非内联样式进行设计！

Answer 1

classNamePrefix适用于大多数组件，但不适用于所有组件，这对我来说有点烦。另一个解决方案是按照问题中的说明添加您自己的className，但使用[attribute*=value]选择器可以增加css的引用性。

<Select
  className="mySelect"
  options={options}
/>

.mySelect[class*="-container"] {
  background-color: lemonchiffon;
  padding: 10px;
}

实时示例