#4 react-css-modules

CSS Modules

在React中写样式有多种方式,比较常见的有 CSS modules,这种方法将css样式和组件放在一起,然后组件中直接应用,目录结构:

|—src
| |_components
|   |_ButtonComponent
|      |_Button.jsx
|     |_button.sass 

具体示例: css mudules in react

可以看出通过模块应用的样式都是通过这样的形式:

# 1.先引入对应模块的样式
import styles from './GlobalSelectors.css';

# 2.使用 className={styles.container} 这种形式表示模块class名
# 而 className="text-left" 这种形式则表示全局下的选择器

export default class GlobalSelectors extends Component {
  render() {
    return (
      <div className={ styles.container }>
        <p className="text-left">Global Selectors</p>
      </div>
    );
  }
}

// css文件为 GlobalSelectors.css
.container {
  border-width: 2px;
  border-style: solid;
  border-color: brown;
  padding: 0 20px;
  margin: 0 6px;
  max-width: 400px;
}

# ':global' 表示该类为全局作用域下的
.container :global .text-left {
  float: left
}

css modules本身需要css-loader来配合,这可能会出现的缺点:

  • 必须使用 camelCase 来命名 css class names
  • 当引入到 className 中时必须要使用 styles 对象
  • CSS modules 和 全局css类混合在一起会很难管理
  • 引用没用定义的CSS modules不会出现警告

而react css Modules组件通过 styleName 将自动的加载CSS MODULES.

react-css-modules

使用react-css-modules将解决上面css modules的问题,例如:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './tabel.sass'

class Table extends React.Component {
  render() {
    return (
      # className 表示全局类名
      # styleName 表示模块类名
      <div styleName="table" className="tabel--info">
        <div styleName="row">
          <div styleName="cell">A0</div>
          <div styleName="cell">B0</div>
        </div>
      </div>
    );
  }
}

# CSSModules 对组件进行修饰
export default CSSModules(Table, styles);

下面谈具体实现步骤和注意事项

1.安装

通过npm安装:

npm install --save react-css-modules

2.webpack配置

这个包需要用到 style-loader | css-loader

1.对css文件进行配置

对于开发阶段:

# 注意 loaders 为复数
{
test: /\.css$/,
loaders: [
  'style?sourceMap',
  'css?modues&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}

对于产品阶段: 使用2.x版本 extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@2
npm install --save-dev resolve-url-loader post-loader

// webpack.config.js file
var ExtractTextPlugin = require('extract-text-webpack-plugin');

# 注意 loader 为单数
{
  test: /\.css$/,
  loader: ExtractTextPlugin({
    notExtractLoader: 'style-loader',
    loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base4:5]!resolve-url!postcss'
  })
}

# 配置ExtractTextPlugin
plugins: [
  // ...
  new ExtractTextPlugin({
    filename: 'app.css',
    allChunks: true
  })
]

2.对于使用sass或其它预处理器

安装需要的加载器:

npm install --save-dev resolve-url-loader sass-loader node-sass

// 不使用sourceMap
{
  test: /\.sass$/,
  loaders: [
    'style',
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
    'resolve-url',
    'sass'
  ]
}

// 使用sourceMap
{
  test: /\.sass$/,
  loaders: [
    'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
    'resolve-url',
    'sass?sourceMap'
  ]
}

当然产品阶段的配置也类似

3.使用 'styles' 重写组件样式

比如:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

这是常见写法,如果要重写styles中样式, 可以在组件中使用 styles 来重写组件样式:

# 引入自定义样式
import customStyles from './table-custom-styles.css';

# 使用 styles属性来重写之前的样式
<Table styles={customStyles} />

4. 循环和子组件

styleName 不能用来修饰组件中的子组件,比如:

import React from 'react';
import CSSModules from 'react-css-modules';
import List from './List';
import styles from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate;
        # 使用styleName 来修饰CustomList组件的子组件List
        # 这是不允许的
        itemTemplate = (name) => {
            return <li styleName='item-template'>{name}</li>;
        };

        return <List itemTemplate={itemTemplate} />;
    }
}

export default CSSModules(CustomList, styles);

可以通过下面2种方法来改写:

方法1:使用 styles 属性

import React from 'react';
import CSSModules from 'react-css-modules';
import List from './List';
import styles from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate;
        # 使用styles属性,从父组件传递下去即可
        itemTemplate = (name) => {
            return <li className={this.props.styles['item-template']}>{name}</li>;
        };

        return <List itemTemplate={itemTemplate} />;
    }
}

export default CSSModules(CustomList, styles);

方法2: 在父组件内部调用CSSModules, 对子组件进行修饰

import React, {Component} from 'react';
impot CSSModules from 'react-css-modules';
import List from './List';
import styles from './tabel.css';
    
class CustomList extends Component {
  render() {
    let itemTemplate;
    
    itemTemplate = (name) => {
      return <li styleName="item-template">{name}</li>;
    };
    # 内部调用CSSModules    
    itemTemplate = CSSModules(itemTemplate, this.props.styles);
    
    return <List itemTemplate={itemTemplate} />;
  }
}

export default CSSModules(CustomList, styles);

5.CSSModules选项

CSSModules有2种写法:

CSSModules(Component, styles, options)

// 或者
CSSModules(Component, styles)

options :

1.allowMultiple: 默认值为false

是否允许声明多个类, false则表示不允许:

<div styleName='foo bar' /> // 不允许则报错

2.errorWhenNotFount: 默认值为 true,

如果styleName在 css modules中没有找到则会报错

6.使用global css

:global .foo {
  // ...
}

这种使用的比较少

7.对于选择性的类名使用styles属性

我们经常会碰到这样的类名情况:

<div className={this.props.showMsg ? 'msg--visble': 'msg--hidden'}>
</div>

使用react-css-modules如何处理这种问题呢?

关键在于被CSSModules装饰的组件继承 styles 属性, 用来映射css modules 和 css classes,即:

class App extends React.Component {
  render() {
    <div>
      <p styleName='foo'></p>
      <p className={this.props.styles.foo}></p>
    </div>
  }
}

在这个例子中,styleName='foo'className={this.props.styles.foo} 是等同的!!!

所以上面问题的解决办法就是:

class App extends Component {
  // ...
  render() {
    # 先声明这个变量
    let visible = this.props.showMsg ? 'msg-visible' : 'msg-hidden';

    return (
      <div 
        # 然后在这用className来代替styleName
        # 注意因为visible含有 '-'等字符,所以使用[]的方式
        className={this.props.styles[visible]}
      >
      ...
      </div>
    )
  }
}

总结

推荐阅读更多精彩内容

  • 从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部...
    yzc123446阅读 239评论 0 1
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 4,749评论 5 29
  • 原文地址:react-css-modules阅读本文前建议了解 CSS Modules 的知识。墙裂推荐阅读 Ca...
    梁相辉阅读 1,311评论 2 17
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 8,216评论 10 105
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 1,356评论 2 16