如何设置 react-select 组件的样式答案

【问题标题】：How to style react-select component如何设置 react-select 组件的样式
【发布时间】：2018-08-26 09:32:58
【问题描述】：

当我尝试将css 捆绑到我的jsx 中时，我很难为react-select 设置样式。

如果我在我的index.html 中包含dist/react-select.css 文件，我可以设置react-select 的样式：

<link rel="stylesheet" href="./react-select.css">

但是，我不希望分发该额外文件的开销。

这是我当前尝试将css 捆绑到我的jsx 中的基本概述（我也尝试了其他一些方法）。在theme.jsx:

import rTSelect from '../stylesheets/react-select.css'
export {rTSelect}

在form.jsx:

import classNames from 'classnames/bind'
import Select from 'react-select'
import {rTSelect} from './theme'

class MySelect extends React.Component {

  constructor(props) {
    super(props)        
    this.className = {}
  }

  _handleChange (value) {
    this.props.parentFunc(value)
  }

  render () {
    let cx = classNames.bind(rTSelect)
    this.className = cx({Select: true})
    return (
      <Tooltip title={this.props.tip} position="top">
        <Select
          className={this.className}
          placeholder={this.props.placeHolder}
          searchable={this.props.searchable}
          disabled={this.props.disabled}
          clearable={this.props.clearable}
          options={this.props.selections}
          value={this.props.selection}
          onChange={this._handleChange.bind(this)}
        />
      </Tooltip>
    )
  }
}

这种方法似乎适用于其他组件（尽管我不必使用classnames/bind）。

我承认我不会太频繁地使用react - 我学到的东西足以让它发挥作用，所以我不是那么精通，对css 的情况只有一个模糊的概念。反正我查了我的package.json，一路走来，好像发现需要安装下面的css相关dependencies：

react-css-modules
react-css-themr
normalize.css
postcss
postcss-cssnext
postcss-modules-values

还有devdependencies:

css-loader
postcss-import
postcss-loader
style-loader

非常感谢任何帮助！

【问题讨论】：

标签： reactjs postcss react-select react-css-modules

【解决方案1】：

好的，我通过在form.jsx 中执行此操作获得了 react-select 来选择样式：

import '!style-loader!css-loader!react-select/dist/react-select.css'

然后照常渲染：

render () {
    return (
      <Tooltip title={this.props.tip} position="top">
        <Select
          placeholder={this.props.placeHolder}
          searchable={this.props.searchable}
          disabled={this.props.disabled}
          clearable={this.props.clearable}
          options={this.props.selections}
          value={this.props.selection}
          onChange={this._handleChange.bind(this)}
        />
      </Tooltip>
    )
  }
}

不过，我不太确定为什么它会起作用！事实上，我并不太确定 import 语法的作用。这是我的猜测：! 的行为有点像“nix 管道”；所以在这里，我将输出从style-loader 传送到css-loader，然后进行实际导入。所以对于react-select，我有点撤销style-loader 在我的webpack 配置中为我所做的一切。换句话说，react-select 不喜欢style-loader。对吧？

【讨论】：