css - 在 Reactjs 中使用 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;
}

现场示例