@H_502_1@原文地址:react-css-modules@H_502_1@React CSS Modules 实现了自动化映射 CSS modules。每个 CSS 类都被赋予了一个带有全局唯一名字的本地标识符。 CSS Modules 实现了模块化和复用性。(https://github.com/minooo/React-Study/tree/master/step-02)
阅读本文前建议了解 CSS Modules 的知识。墙裂推荐阅读 Cam 的文章 CSS Modules详解及React中实践
CSS Modules
@H_502_1@CSS Mosules 碉堡了。如果你对 CSS Modules 还不够熟悉,那么没关系,它只是一个使用 webpack 之类的模块打包机加载 CSS 作用于特定文档的概念。CSS module loader 将为每一个 CSS 类在加载 CSS 文档(确切的说,这个文档就是Interoperable CSS)的时候生成一个唯一的名字。你可以来看下这个 CSS Modules 实践例子——webpack-demo。 @H_502_1@在React语法环境中,CSS Modules 看起来是这样子的:import React from 'react'; import styles from './table.css'; export default class Table extends React.Component { render () { return <div className={styles.table}> <div className={styles.row}> <div className={styles.cell}>A0</div> <div className={styles.cell}>B0</div> </div> </div>;@H_502_1@组件渲染出来后会生成类似于这样的一个标记:
<div class="table__table___32osj"> <div class="table__row___2w27N"> <div class="table__cell___2w27N">A0</div> <div class="table__cell___1oVw5">B0</div> </div> </div>@H_502_1@同时也会生成对应的匹配那些CSS类的CSS文件,是不是碉堡了?!
webpack css-loader
@H_404_24@
@H_502_1@CSS Modules 是一个可以被多种方法实现的规范。react-css-modules
利用 webpack css-loader 所提供的功能启用了现有的 CSS Modules 的集成。
现有的问题
@H_502_1@webpack 的 css-loader 本身有几处劣势:
- @H_502_1@你必须使用驼峰式类名。
- @H_502_1@无论何时构建一个
className
你都必须使用 style
对象。
- @H_502_1@混合类模块以及全局 CSS 类不够灵活。
- @H_502_1@引用一个未定义的 CSS 模块时解析结果为
undefined
,但并无相关警告提示。
@H_502_1@React CSS Modules 组件自动加载应用了 styleName
特性的 CSS Modules ,例如:
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);
@H_502_1@使用 react-css-modules
好处多多:
- @H_502_1@你不用再被强制使用驼峰式命名规则
- @H_502_1@你不必每次使用一个 CSS 模块时还要引用
styles
对象。
- @H_502_1@有一个明显的区别在全局 CSS 和 CSS Modules 之间,示例如下:
<div className='global-css' styleName='local-module'></div>
- @H_502_1@当
styleName
引用一个为定义的 CSS Module 时,你会得到一个警告信息。(errorWhenNotFound
选项)
- @H_502_1@你可以为每一个
ReactElement
只使用单独的 CSS Module。(allowMultiple
选项)。
实现
@H_502_1@react-css-modules
扩展了目标组件的 render
方法。它将根据 styleName
的值在关联的 style
对象中查找对应的 CSS Modules,并为 ReactElement className
属性值添加相匹配的独一无二的 CSS 类名。
@H_502_1@碉堡了!
@H_502_1@你可以参照下这个例子进一步加深印象,react-css-modules-examples。
用法
@H_502_1@设置包括:
- @H_502_1@设置一个
module bundler
加载 Interoperable CSS。
- @H_502_1@使用
react-css-modules
修整你的组件。
如何设置一个 module bundler
呢?@H_404_24@
webpack
@H_502_1@开发模式
@H_502_1@开发环境下,若你想启用 Sourcemaps,并要使用 webpack 的 Hot Module Replacement (HMR,热替换)。style-loader
已经支持 HMR。因此,Hot Module Replacement 开箱即用。
@H_502_1@设置步骤:
{
test: /\.css$/,loaders: [
'style?sourceMap','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
@H_502_1@生产模式
@H_502_1@在生产环境中,如果你想把CSS单独提取出来的话,你需要了解这样做的好处和坏处。
@H_502_1@优点:
- @H_502_1@更少的样式标签
- @H_502_1@CSS SourceMap
- @H_502_1@CSS 并行请求
- @H_502_1@CSS 缓存分离
- @H_502_1@页面渲染更快(更少的代码以及更少的 DOM 操作)
@H_502_1@缺点:
@H_502_1@— extract-text-webpack-plugin
@H_502_1@设置步骤:
- @H_502_1@安装
style-loader
- @H_502_1@安装
css-loader
- @H_502_1@使用
extract-text-webpack-plugin
提取 CSS 到一个单独的样式表。
- @H_502_1@设置
/.css$/
加载器: {
test: /\.css$/,loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}
- @H_502_1@设置
extract-text-webpack-plugin
插件: new ExtractTextPlugin('app.css',{
allChunks: true
})
@H_502_1@完整实例请参照 webpack-demo 或者 react-css-modules-examples。
@H_502_1@Browserify(如果你是使用这个构建工具的话)
@H_502_1@请参考 css-modulesify。
扩展组件样式@H_404_24@
@H_502_1@使用 styles
属性重写默认的组件样式。
@H_502_1@示例如下:
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);
@H_502_1@在这个例子中,CSSModules
被用来美化 Table
组件通过引用 ./table.css
CSS 模块。当 Table
组件渲染完毕,它将使用 styles
对象的属性构建 className
的值。
@H_502_1@使用 styles
属性你可以覆盖组件默认的 styles
对象。例如:
import customStyles from './table-custom-styles.css';
<Table styles={customStyles} />;
@H_502_1@Interoperable CSS 可以扩展其他 ICSS。利用这个功能可以扩展默认样式,例如:
/* table-custom-styles.css */
.table {
composes: table from './table.css';
}
.row {
composes: row from './table.css';
}
/* .cell {
composes: cell from './table.css';
} */
.table {
width: 400px;
}
.cell {
float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
}
@H_502_1@在这个例子中,table-custom-styles.css
有选择的扩展了 table.css
(Table
组件的默认样式)。
这里是一个更直观的实践例子:UsingStylesProperty example`。
style
属性@H_404_24@
@H_502_1@包装过的组件继承了 styles
属性,该属性描述了 CSS 模块和 CSS 类之间的映射关系。
class extends React.Component {
render () {
<div>
<p styleName='foo'></p>
<p className={this.props.styles.foo}></p>
</div>;
}
}
@H_502_1@在上面示例中,styleName='foo'
和 className={this.props.styles.foo}
是等价的。
styles
属性是为 Loops and Child Components
实现组件包装而特意设计的!
Loops and Child Components@H_404_24@
@H_502_1@styleName
不能去定义一个由其他组件生成的 React元素的样式 。例如:
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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@上面的实例将不会工作。CSSModules 被用来包装 CustomList
组件。然而,它是呈现 itemTemplage
的列表组件。
@H_502_1@为了解决这个问题,包装过的组件继承了样式属性,这样你可以将它作为一个常规的 CSS 模块对象来使用。
因此,前面的例子可以改写为这样:
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;
itemTemplate = (name) => {
return <li className={this.props.styles['item-template']}>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@在把子组件传递给渲染组件之前,如果你使用了 CSSMmodules
包装这个子组件,那么你就可以在这个子组件内使用 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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
itemTemplate = CSSModules(itemTemplate,this.props.styles);
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
包装@H_404_24@
/**
* @typedef CSSModules~Options
* @see {@link https://github.com/gajus/react-css-modules#options}
* @property {Boolean} allowMultiple
* @property {Boolean} errorWhenNotFound
*/
/**
* @param {Function} Component
* @param {Object} defaultStyles CSS Modules class map.
* @param {CSSModules~Options} options
* @return {Function}
*/
@H_502_1@你需要用 react-css-modules
包装你的组件,例如:
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);
@H_502_1@就这么简单!
@H_502_1@顾名思义,react-css-modules
和 ES7 decorators 语法是兼容的。例如:
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
@CSSModules(styles)
export default class extends React.Component {
render () {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
</div>
</div>;
}
}
@H_502_1@简直碉堡了!
@H_502_1@这里有一个用 webpack 构建的示例,你可以看下 react-css-modules-examples
Options@H_404_24@
@H_502_1@CSSModules
函数提供了一些选项在第三个参数的位置上。
CSSModules(Component,styles,options);
@H_502_1@或者作为第二个参数:
@CSSModules(styles,options);
allowMultiple
@H_404_24@
@H_502_1@默认:false
。
允许多个样式模块名字。
当 false
,以下会引起一个错误。
<div styleName='foo bar' />
errorWhenNotFound
@H_404_24@
@H_502_1@默认:true
。
当 styleName
不能匹配到一个未定义的 CSS Module 时将抛出一个错误。
SASS,SCSS,LESS 以及其他 CSS 预处理器
@H_502_1@Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器,你只需添加这个预处理器到 loaders
的数组中即可。例如在这个 webpack 的例子中,它就像安装 sass-loader
一样简单,添加 !sass
到 style-loader
加载器查询的末尾(加载器是从右到左被依次执行的):
{
test: /\.scss$/,loaders: [
'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]','resolve-url','sass'
]
}
开启 Sourcemaps@H_404_24@
@H_502_1@开启 CSS Source maps,需要在 css-loader
和 sass-loader
中添加参数 sourceMap
{
test: /\.scss$/,'sass?sourceMap'
]
}
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:
.Box {
width: 100px;
height: 100px;
}
.empty {
composes: Box;
background: #4CAF50;
}
.full {
composes: Box;
background: #F44336;
}
@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。
@H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!!
@H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
className
你都必须使用 style
对象。undefined
,但并无相关警告提示。styles
对象。<div className='global-css' styleName='local-module'></div>
styleName
引用一个为定义的 CSS Module 时,你会得到一个警告信息。(errorWhenNotFound
选项)ReactElement
只使用单独的 CSS Module。(allowMultiple
选项)。module bundler
加载 Interoperable CSS。react-css-modules
修整你的组件。module bundler
呢?@H_404_24@
webpack
@H_502_1@开发模式 @H_502_1@开发环境下,若你想启用 Sourcemaps,并要使用 webpack 的 Hot Module Replacement (HMR,热替换)。style-loader
已经支持 HMR。因此,Hot Module Replacement 开箱即用。
@H_502_1@设置步骤:
{ test: /\.css$/,loaders: [ 'style?sourceMap','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }@H_502_1@生产模式 @H_502_1@在生产环境中,如果你想把CSS单独提取出来的话,你需要了解这样做的好处和坏处。
@H_502_1@优点:@H_502_1@— extract-text-webpack-plugin @H_502_1@设置步骤:@H_502_1@缺点:
- @H_502_1@更少的样式标签
- @H_502_1@CSS SourceMap
- @H_502_1@CSS 并行请求
- @H_502_1@CSS 缓存分离
- @H_502_1@页面渲染更快(更少的代码以及更少的 DOM 操作)
- @H_502_1@安装
style-loader
- @H_502_1@安装
css-loader
- @H_502_1@使用
extract-text-webpack-plugin
提取 CSS 到一个单独的样式表。 - @H_502_1@设置
/.css$/
加载器:{ test: /\.css$/,loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') }
- @H_502_1@设置
extract-text-webpack-plugin
插件:new ExtractTextPlugin('app.css',{ allChunks: true })
扩展组件样式@H_404_24@
@H_502_1@使用 styles
属性重写默认的组件样式。
@H_502_1@示例如下:
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);
@H_502_1@在这个例子中,CSSModules
被用来美化 Table
组件通过引用 ./table.css
CSS 模块。当 Table
组件渲染完毕,它将使用 styles
对象的属性构建 className
的值。
@H_502_1@使用 styles
属性你可以覆盖组件默认的 styles
对象。例如:
import customStyles from './table-custom-styles.css';
<Table styles={customStyles} />;
@H_502_1@Interoperable CSS 可以扩展其他 ICSS。利用这个功能可以扩展默认样式,例如:
/* table-custom-styles.css */
.table {
composes: table from './table.css';
}
.row {
composes: row from './table.css';
}
/* .cell {
composes: cell from './table.css';
} */
.table {
width: 400px;
}
.cell {
float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
}
@H_502_1@在这个例子中,table-custom-styles.css
有选择的扩展了 table.css
(Table
组件的默认样式)。
这里是一个更直观的实践例子:UsingStylesProperty example`。
style
属性@H_404_24@
@H_502_1@包装过的组件继承了 styles
属性,该属性描述了 CSS 模块和 CSS 类之间的映射关系。
class extends React.Component {
render () {
<div>
<p styleName='foo'></p>
<p className={this.props.styles.foo}></p>
</div>;
}
}
@H_502_1@在上面示例中,styleName='foo'
和 className={this.props.styles.foo}
是等价的。
styles
属性是为 Loops and Child Components
实现组件包装而特意设计的!
Loops and Child Components@H_404_24@
@H_502_1@styleName
不能去定义一个由其他组件生成的 React元素的样式 。例如:
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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@上面的实例将不会工作。CSSModules 被用来包装 CustomList
组件。然而,它是呈现 itemTemplage
的列表组件。
@H_502_1@为了解决这个问题,包装过的组件继承了样式属性,这样你可以将它作为一个常规的 CSS 模块对象来使用。
因此,前面的例子可以改写为这样:
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;
itemTemplate = (name) => {
return <li className={this.props.styles['item-template']}>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@在把子组件传递给渲染组件之前,如果你使用了 CSSMmodules
包装这个子组件,那么你就可以在这个子组件内使用 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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
itemTemplate = CSSModules(itemTemplate,this.props.styles);
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
包装@H_404_24@
/**
* @typedef CSSModules~Options
* @see {@link https://github.com/gajus/react-css-modules#options}
* @property {Boolean} allowMultiple
* @property {Boolean} errorWhenNotFound
*/
/**
* @param {Function} Component
* @param {Object} defaultStyles CSS Modules class map.
* @param {CSSModules~Options} options
* @return {Function}
*/
@H_502_1@你需要用 react-css-modules
包装你的组件,例如:
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);
@H_502_1@就这么简单!
@H_502_1@顾名思义,react-css-modules
和 ES7 decorators 语法是兼容的。例如:
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
@CSSModules(styles)
export default class extends React.Component {
render () {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
</div>
</div>;
}
}
@H_502_1@简直碉堡了!
@H_502_1@这里有一个用 webpack 构建的示例,你可以看下 react-css-modules-examples
Options@H_404_24@
@H_502_1@CSSModules
函数提供了一些选项在第三个参数的位置上。
CSSModules(Component,styles,options);
@H_502_1@或者作为第二个参数:
@CSSModules(styles,options);
allowMultiple
@H_404_24@
@H_502_1@默认:false
。
允许多个样式模块名字。
当 false
,以下会引起一个错误。
<div styleName='foo bar' />
errorWhenNotFound
@H_404_24@
@H_502_1@默认:true
。
当 styleName
不能匹配到一个未定义的 CSS Module 时将抛出一个错误。
SASS,SCSS,LESS 以及其他 CSS 预处理器
@H_502_1@Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器,你只需添加这个预处理器到 loaders
的数组中即可。例如在这个 webpack 的例子中,它就像安装 sass-loader
一样简单,添加 !sass
到 style-loader
加载器查询的末尾(加载器是从右到左被依次执行的):
{
test: /\.scss$/,loaders: [
'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]','resolve-url','sass'
]
}
开启 Sourcemaps@H_404_24@
@H_502_1@开启 CSS Source maps,需要在 css-loader
和 sass-loader
中添加参数 sourceMap
{
test: /\.scss$/,'sass?sourceMap'
]
}
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:
.Box {
width: 100px;
height: 100px;
}
.empty {
composes: Box;
background: #4CAF50;
}
.full {
composes: Box;
background: #F44336;
}
@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。
@H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!!
@H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
style
属性@H_404_24@
@H_502_1@包装过的组件继承了 styles
属性,该属性描述了 CSS 模块和 CSS 类之间的映射关系。
class extends React.Component { render () { <div> <p styleName='foo'></p> <p className={this.props.styles.foo}></p> </div>; } }@H_502_1@在上面示例中,
styleName='foo'
和 className={this.props.styles.foo}
是等价的。styles
属性是为 Loops and Child Components
实现组件包装而特意设计的!
Loops and Child Components@H_404_24@
@H_502_1@styleName
不能去定义一个由其他组件生成的 React元素的样式 。例如:
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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@上面的实例将不会工作。CSSModules 被用来包装 CustomList
组件。然而,它是呈现 itemTemplage
的列表组件。
@H_502_1@为了解决这个问题,包装过的组件继承了样式属性,这样你可以将它作为一个常规的 CSS 模块对象来使用。
因此,前面的例子可以改写为这样:
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;
itemTemplate = (name) => {
return <li className={this.props.styles['item-template']}>{name}</li>;
};
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
@H_502_1@在把子组件传递给渲染组件之前,如果你使用了 CSSMmodules
包装这个子组件,那么你就可以在这个子组件内使用 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;
itemTemplate = (name) => {
return <li styleName='item-template'>{name}</li>;
};
itemTemplate = CSSModules(itemTemplate,this.props.styles);
return <List itemTemplate={itemTemplate} />;
}
}
export default CSSModules(CustomList,styles);
包装@H_404_24@
/**
* @typedef CSSModules~Options
* @see {@link https://github.com/gajus/react-css-modules#options}
* @property {Boolean} allowMultiple
* @property {Boolean} errorWhenNotFound
*/
/**
* @param {Function} Component
* @param {Object} defaultStyles CSS Modules class map.
* @param {CSSModules~Options} options
* @return {Function}
*/
@H_502_1@你需要用 react-css-modules
包装你的组件,例如:
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);
@H_502_1@就这么简单!
@H_502_1@顾名思义,react-css-modules
和 ES7 decorators 语法是兼容的。例如:
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
@CSSModules(styles)
export default class extends React.Component {
render () {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
</div>
</div>;
}
}
@H_502_1@简直碉堡了!
@H_502_1@这里有一个用 webpack 构建的示例,你可以看下 react-css-modules-examples
Options@H_404_24@
@H_502_1@CSSModules
函数提供了一些选项在第三个参数的位置上。
CSSModules(Component,styles,options);
@H_502_1@或者作为第二个参数:
@CSSModules(styles,options);
allowMultiple
@H_404_24@
@H_502_1@默认:false
。
允许多个样式模块名字。
当 false
,以下会引起一个错误。
<div styleName='foo bar' />
errorWhenNotFound
@H_404_24@
@H_502_1@默认:true
。
当 styleName
不能匹配到一个未定义的 CSS Module 时将抛出一个错误。
SASS,SCSS,LESS 以及其他 CSS 预处理器
@H_502_1@Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器,你只需添加这个预处理器到 loaders
的数组中即可。例如在这个 webpack 的例子中,它就像安装 sass-loader
一样简单,添加 !sass
到 style-loader
加载器查询的末尾(加载器是从右到左被依次执行的):
{
test: /\.scss$/,loaders: [
'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]','resolve-url','sass'
]
}
开启 Sourcemaps@H_404_24@
@H_502_1@开启 CSS Source maps,需要在 css-loader
和 sass-loader
中添加参数 sourceMap
{
test: /\.scss$/,'sass?sourceMap'
]
}
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:
.Box {
width: 100px;
height: 100px;
}
.empty {
composes: Box;
background: #4CAF50;
}
.full {
composes: Box;
background: #F44336;
}
@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。
@H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!!
@H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
/** * @typedef CSSModules~Options * @see {@link https://github.com/gajus/react-css-modules#options} * @property {Boolean} allowMultiple * @property {Boolean} errorWhenNotFound */ /** * @param {Function} Component * @param {Object} defaultStyles CSS Modules class map. * @param {CSSModules~Options} options * @return {Function} */@H_502_1@你需要用
react-css-modules
包装你的组件,例如:
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);@H_502_1@就这么简单! @H_502_1@顾名思义,
react-css-modules
和 ES7 decorators 语法是兼容的。例如:
import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './table.css'; @CSSModules(styles) export default class extends React.Component { render () { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> <div styleName='cell'>B0</div> </div> </div>; } }@H_502_1@简直碉堡了! @H_502_1@这里有一个用 webpack 构建的示例,你可以看下 react-css-modules-examples
Options@H_404_24@
@H_502_1@CSSModules
函数提供了一些选项在第三个参数的位置上。
CSSModules(Component,styles,options);
@H_502_1@或者作为第二个参数:
@CSSModules(styles,options);
allowMultiple
@H_404_24@
@H_502_1@默认:false
。
允许多个样式模块名字。
当 false
,以下会引起一个错误。
<div styleName='foo bar' />
errorWhenNotFound
@H_404_24@
@H_502_1@默认:true
。
当 styleName
不能匹配到一个未定义的 CSS Module 时将抛出一个错误。
SASS,SCSS,LESS 以及其他 CSS 预处理器
@H_502_1@Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器,你只需添加这个预处理器到 loaders
的数组中即可。例如在这个 webpack 的例子中,它就像安装 sass-loader
一样简单,添加 !sass
到 style-loader
加载器查询的末尾(加载器是从右到左被依次执行的):
{
test: /\.scss$/,loaders: [
'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]','resolve-url','sass'
]
}
开启 Sourcemaps@H_404_24@
@H_502_1@开启 CSS Source maps,需要在 css-loader
和 sass-loader
中添加参数 sourceMap
{
test: /\.scss$/,'sass?sourceMap'
]
}
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:
.Box {
width: 100px;
height: 100px;
}
.empty {
composes: Box;
background: #4CAF50;
}
.full {
composes: Box;
background: #F44336;
}
@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。
@H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!!
@H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
allowMultiple
@H_404_24@
@H_502_1@默认:false
。允许多个样式模块名字。
当
false
,以下会引起一个错误。
<div styleName='foo bar' />
errorWhenNotFound
@H_404_24@
@H_502_1@默认:true
。
当 styleName
不能匹配到一个未定义的 CSS Module 时将抛出一个错误。
SASS,SCSS,LESS 以及其他 CSS 预处理器
@H_502_1@Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器,你只需添加这个预处理器到 loaders
的数组中即可。例如在这个 webpack 的例子中,它就像安装 sass-loader
一样简单,添加 !sass
到 style-loader
加载器查询的末尾(加载器是从右到左被依次执行的):
{
test: /\.scss$/,loaders: [
'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]','resolve-url','sass'
]
}
开启 Sourcemaps@H_404_24@
@H_502_1@开启 CSS Source maps,需要在 css-loader
和 sass-loader
中添加参数 sourceMap
{
test: /\.scss$/,'sass?sourceMap'
]
}
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:
.Box {
width: 100px;
height: 100px;
}
.empty {
composes: Box;
background: #4CAF50;
}
.full {
composes: Box;
background: #F44336;
}
@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。
@H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!!
@H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
css-loader
和 sass-loader
中添加参数 sourceMap
{ test: /\.scss$/,'sass?sourceMap' ] }
类组合
@H_502_1@CSS Mosules 促进了类组合模式,也就是说,每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如:.Box { width: 100px; height: 100px; } .empty { composes: Box; background: #4CAF50; } .full { composes: Box; background: #F44336; }@H_502_1@类组合促进了标记和语义化样式更好的分离,如果没有 CSS Modules,这点将难以实现。 @H_502_1@因为 CSS Module 中的类名是本地的,允许你使用诸如 'empty' 或 'full' 这些通用的类名,而无需再加上'Box-' 前缀,简直完美!! @H_502_1@想学更多的类组合规则?我建议你读下 Glen Maddern 的关于 CSS Modules 的文章,还有官方文档 spec of the CSS Modules。
类组合解决了什么问题?@H_404_24@
@H_502_1@设想下有这么个例子:
.Box {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
<div class='Box Box-empty'></div>
@H_502_1@这是标准的 OOCSS 模式,这种模式最大的问题就是,如果你想改变样式,你几乎每次还要修改 HTML。
类组合也可以使用 CSS 预处理器@H_404_24@
@H_502_1@接下来是一个学习实践,以加深对类组合本质的理解。CSS Modules 支持一个本机方法,该方法是要组合的 CSS Mosules 使用 composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box {
width: 100px;
height: 100px;
}
.Box-empty {
@extend %Box;
background: #4CAF50;
}
.Box-full {
@extend %Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty,.Box-full {
width: 100px;
height: 100px;
}
.Box-empty {
background: #4CAF50;
}
.Box-full {
background: #F44336;
}
@H_502_1@使用 mixins:
@mixin Box {
width: 100px;
height: 100px;
}
.Box-empty {
@include Box;
background: #4CAF50;
}
.Box-full {
@include Box;
background: #F44336;
}
@H_502_1@编译后,得到:
.Box-empty {
width: 100px;
height: 100px;
background: #4CAF50;
}
.Box-full {
width: 100px;
height: 100px;
background: #F44336;
}
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下:
:global .foo {
}
@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。
@H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启 allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button {
}
.active {
}
<div styleName='button active'></div>
@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。
composes
关键字实现的。CSS 预处理不是必须的。
@H_502_1@在 SCSS 中你可以使用 @extend
关键字,和使用 Mixin Directives去写组合,例如:
@H_502_1@使用 @extend
:
%Box { width: 100px; height: 100px; } .Box-empty { @extend %Box; background: #4CAF50; } .Box-full { @extend %Box; background: #F44336; }@H_502_1@编译后,得到:
.Box-empty,.Box-full { width: 100px; height: 100px; } .Box-empty { background: #4CAF50; } .Box-full { background: #F44336; }@H_502_1@使用 mixins:
@mixin Box { width: 100px; height: 100px; } .Box-empty { @include Box; background: #4CAF50; } .Box-full { @include Box; background: #F44336; }@H_502_1@编译后,得到:
.Box-empty { width: 100px; height: 100px; background: #4CAF50; } .Box-full { width: 100px; height: 100px; background: #F44336; }
全局样式
@H_502_1@CSS Modules 不会限制你使用全局 CSS。用法如下::global .foo { }@H_502_1@但是呢,还是请你谨慎使用全局样式。在使用 CSS Modules 过程中,只有少数情况下才会用到全局样式,例如:normalization。
多个 CSS Modules
@H_502_1@避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。 @H_502_1@但是如果你非要使用多个 CSS Modules 去描述一个元素,那么就开启allowMultiple
选项。(参见文档前面 选项 部分)。当多个 CSS Modules 被用来描述一个元素时,react-css-modules
将会为每一个在 styleName
声明中匹配的 CSS Module 附加一个独一无二的类名。如:
.button { } .active { }
<div styleName='button active'></div>@H_502_1@这会把Interoperable CSS 和 CSS class 都映射到目标元素上。