Question

我已经使用ModularCSS和webpack启用了postCSS：

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: "style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"
}

这意味着我现在可以导入＆＃34; CSS模块＆＃34;像这样：

组件/ app.js

import '../style/bootstrap.css';

这将确保整个应用程序基于bootstrap＆＃34; global css＆＃34;，如重置。

此外，在组件中我可以清楚地定义它们对Bootstrap的依赖性，例如：

组件/ control.js

import Bootstrap from '../style/bootstrap.css';

class Control extends Component {

  render() {
    return (
      <button className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}>choose me</button>
    );
  }
}

但是，语法className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}很难阅读，也不易使用。

之前是否已解决此问题？关于如何使其更具可读性和可行性的任何建议？

Answer 1

您可以尝试使用classNames

import Bootstrap from '../style/bootstrap.css';

let cx = classNames.bind(Bootstrap);


class Control extends Component {

  render() {
    let className = cx({
      btn: true,
      'btn-primary': true
    });
    return (
      <button className={className}>choose me</button>
    );
  }
}

Answer 2

你看过React CSS模块吗？

使用装饰器，它似乎非常实用。

https://github.com/gajus/react-css-modules#decorator

对于多个类名

，您需要将此选项设置为true

https://github.com/gajus/react-css-modules#allowmultiple

使用带有Bootstrap 4和React的模块化CSS

2 个答案: