样式化react select with CSS模块在沙箱上工作，但在本地计算机上不工作

文档说明使用

className

和

classnameffix

道具

确保与样式化组件、CSS模块和 其他图书馆

在中，使用CSS模块和

节点sass

，它似乎可以工作。但是，如果我在本地机器上的create-react应用程序中复制以下代码，它将无法工作。我的CRA使用类型脚本模板。这就是问题所在吗？其他一切都一样

Select.module.scss

.select {
  outline: 1px solid red;

  .select__control {
    background-color: salmon;
  }
}

.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}
      classNamePrefix={style.select}
    />
  )
}

export default Select;

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

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

export default App;

---

我可以通过以下方式使其在这里发挥作用：

Select.module.scss

.select {
  outline: 1px solid red;

  .select__control {
    background-color: salmon;
  }
}

.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;

从“React”导入React；
从“反应选择”导入RS；
从“/Select.module.scss”导入样式；
常量选项=[
{标签：“hi”，值：“hi”}
]
功能选择（道具：任意）{
返回(
)
}
导出默认选择；

基本上，我从react select组件中删除了

classnameprifix

，并将

更改为
[class$=“-control”]
，它匹配以
-control
结尾的所有类

这里的问题是因为css加载器在我的类名中添加了一个散列，例如
{select:“styles\u select\u SQ71h”，select\u control:“styles\u select\u control\u xcj2p”}
在您的项目中，css模块可能在类名的末尾进行散列，比如：
{select:“styles\u select\u SQ71h”，select\u control:“styles\u select\u control\u xcj2p”}
但是react select需要类似于
{select:“style\u select\u SQ71h”，select\u control:“style\u select\u SQ71h\u control”}