Question

我尝试在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

非常感谢任何帮助！

Answer 1

好的，我在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语法的作用。这是我的猜测：!的行为有点像管道;所以在这里，我将style-loader的输出汇总到css-loader然后进行实际导入。因此，对于react-select，我有点在style-loader配置中撤消webpack为我做的任何事情。换句话说，react-select不喜欢style-loader。正确？

如何设置反应选择组件的样式

1 个答案: