使用CSS模块设置react-select样式可以在Sandbox上工作，但不能在本地计算机上工作

Question

文档的“使用 ClassNames”部分指出react-select使用className和classNamePrefix属性

确保与样式组件、CSS 模块和其他库的兼容性。

在这个 CodeSandbox中，使用 CSS 模块 和node-sass，它似乎可以工作。但是，如果我在本地计算机上的 create-react-app 中复制以下代码，它将不起作用。我的 CRA 使用 Typescript 模板。这是问题所在吗？其他一切都一样。

Select.module.scss

.select {
  outline: 1px solid red;

  .select__control {
    background-color: salmon;
  }
}

---

Select.tsx

import React from 'react';
import RS from 'react-select';
import style from './Select.module.scss';

const options = [
  {label: "hi", value: "hi"}
]

function Select(props: any) {
  return (
    <RS
      options={options}
      className={style.select}
      classNamePrefix={style.select}
    />
  )
}

export default Select;

---

App.tsx

import React from 'react';
import Select from './Select';

function App() {
  return (
    <div className="App">
      <Select />
    </div>
  );
}

export default App;

Answer 1

我可以通过以下方式让它在这里工作：

Select.module.scss

.select {
  outline: 1px solid red;

  [class$="-control"] {
    background-color: salmon;
  }
}

Select.tsx

import React from 'react';
import RS from 'react-select';
import style from './Select.module.scss';

const options = [
  {label: "hi", value: "hi"}
]

function Select(props: any) {
  return (
    <RS
      options={options}
      className={style.select}
    />
  )
}

export default Select;

基本上，我classNamePrefix从react-select组件中删除并更改.select__control为[class$="-control"]，它匹配所有以-control.

这里的问题是因为 css 加载器在我的类名中添加了一个哈希值，例如{select: "styles_select__SQ71h", select__control: "styles_select__control__xcj2p"}.