Javascript 如何为react-select.js设置全局样式

我想为这个项目设定全球风格。据我所知，我可以采取两种方式：

使用and

classnameffix

，然后使用CSS将元素作为目标

优点：我可以在任何地方使用相同的样式

缺点：每个新组件必须使用完全相同的

className

和

className前缀

例如：

className='react-select-container'

classNamePrefix=“反应选择”

结果:

...
...
...

使用创建外部javascript文件

优点：比CSS更灵活

缺点：每个新组件都必须使用导入的外部文件使用样式属性

例如：

const customStyles={
选项：（已提供，状态）=>({
假如
borderBottom:“1px点粉色”，
颜色：state.isSelected？'red'：'blue'，
填充：20，
}),
控件：（）=>({
//所有react select的样式都不会传递给
宽度：200，
}),
singleValue：（提供，状态）=>{
常数不透明度=state.isDisabled？0.5:1；
常量转换=‘不透明度300ms’；
返回{…提供，不透明度，转换}；
}
}
常量应用=（）=>(
);

---

设置多个react select组件样式的最佳方法是什么？是否可以全局设置样式，并且每个新的react-select组件都会自动使用该样式？

一种方法是创建自己的选择组件，如导入的

CustomSelect

，而不是为其中一个设置自定义

样式

或

主题

：

import React, { Component } from 'react'
import Select from 'react-select'

class CustomSelect extends Component {
  render() {

    const styles = {
      ...
      // what ever you need
    }

    return <Select styles={styles} {...this.props} />
  }
}

export default CustomSelect

import React，{Component}来自“React”
从“反应选择”导入选择
类CustomSelect扩展组件{
render（）{
常量样式={
...
//你到底需要什么
}
返回
}
}
导出默认自定义选择

---

我真的不知道这是否是最好的方法，但我已经尝试了这两种方法，并且在一个有很多人选择的大型项目中，这是维护/修改它的最简单的方法。另外，如果在某个时候您需要定制组件，那么它非常方便。

我也在考虑同样的方法，我认为您是对的，它比我提供的两种方法灵活得多。谢谢。@Observer我想在

React

中添加越来越多的内容，您可以在JS中通过CSS看到定制，减少

类

和传统CSS的通用性是一个很好的做法

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

  const App = () => (
    <Select
      styles={customStyles}
      options={...}
    />
  );

import React, { Component } from 'react'
import Select from 'react-select'

class CustomSelect extends Component {
  render() {

    const styles = {
      ...
      // what ever you need
    }

    return <Select styles={styles} {...this.props} />
  }
}

export default CustomSelect