1

react-select尝试捆绑我css的jsx.

react-select如果我将它的文件dist/react-select.css包含在我的index.html：

<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

非常感谢任何帮助！

4

1 回答 1

0

好的，我得到了 react-select 通过这样做来选择样式form.jsx：

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。正确的？

于 2018-03-17T18:17:46.083 回答