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

Question

我想为react-select设置全局样式。 据我了解，我可以采取两种方法：

1. 使用className和classNamePrefix ，然后使用CSS定位元素。

   优点：我到处都可以使用相同的样式

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

例：

的className =“反应选容器”

classNamePrefix = “反应-选择”

结果：

 <div class="react-select-container"> <div class="react-select__control"> <div class="react-select__value-container">...</div> <div class="react-select__indicators">...</div> </div> <div class="react-select__menu"> <div class="react-select__menu-list"> <div class="react-select__option">...</div> </div> </div> </div> 

2. 使用“提供的样式和状态”创建外部javascript文件

   优点：比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={...} /> ); 

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

Answer 1

一种方法是创建自己导入的Select组件（如CustomSelect ，而不是对其中一种自定义style或theme设置的react-select ：

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

我不能真正确定这是否是最好的方法，但是我已经尝试了这两种方法，并且在一个有很多选择的大型项目中，这是维护/修改它的最简单方法。 此外，如果您需要自定义组件，这真的很方便。