git://www.github.com/gajus/react-css-modules.git
git clone http://www.github.com/gajus/react-css-modules
$ svn co --depth empty http://www.github.com/gajus/react-css-modules
Checked out revision 1.
$ cd repo
$ svn up trunk
响应CSS模块实现CSS模块的自动映射。 每个CSS类都被分配一个具有全局惟一名称的本地作用域标识符。 CSS模块支持模块化和可以重用的CSS !
注:
如果你考虑使用 react-css-modules
,请评估 babel-plugin-react-css-modules
是否覆盖你的用例。babel-plugin-react-css-modules
是 react-css-modules
的轻量级替代品。
babel-plugin-react-css-modules
不是替换中的一项,并且不涵盖 react-css-modules
的所有用例。 然而,它的性能开销比( 0 -10% vs +50 %; 请参见性能测试。) 小很多,而且体积也更小。
很容易上手 ! 请参见演示 https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo
CSS模块插件非常出色。 如果你不熟悉CSS模块,它是使用模块bundler如 web pack 将CSS作用域加载到特定文档中的概念。 CSS模块加载器将在加载CSS文档(。可以互操作的CSS插件) 时为每个CSS类生成唯一的名称。 为了在实践中看到CSS模块,演示了。
在反应的上下文中,CSS模块看起来像这样:
importReactfrom'react';importstylesfrom'./table.css';exportdefaultclassTableextendsReact.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>; } }
呈现组件将生成类似于以下内容的标记:
<div class="table__table___32osj"><div class="table__row___2w27N"><div class="table__cell___1oVw5">A0</div><div class="table__cell___1oVw5">B0</div></div></div>
和对应CSS类的对应CSS文件。
Awesome !
css-loader
模块是一种可以以多种方式实现的规范。 react-css-modules
利用现有的CSS模块实现 web service CSS加载程序。
web pack 加载器插件本身有几个缺点:
camelCase
CSS类名称。className
时,必须使用 styles
对象。undefined
。响应CSS模块组件使用 styleName
属性( e.g. ) 自动加载CSS模块
importReactfrom'react';importCSSModulesfrom'react-css-modules';importstylesfrom'./table.css';classTableextendsReact.Component { render () { return<div styleName='table'><div styleName='row'><div styleName='cell'>A0</div><div styleName='cell'>B0</div></div></div>; } }exportdefaultCSSModules(Table, styles);
使用 react-css-modules
:
camelCase
命名约定。styles
对象。<div className='global-css' styleName='local-module'></div>
styleName
引用未定义的CSS模块( handleNotFoundStyleName
命令行选项) 时,会发出警告。ReactElement
( allowMultiple
命令行选项) 使用一个单独的CSS模块。react-css-modules
扩展了目标组件的render
方法。 方法将使用 styleName
的值查找关联样式对象中的CSS模块,并将匹配惟一的CSS类名附加到 ReactElement
className
属性值中。
太棒了 !
安装程序包括:
在开发环境中,你希望启用 Sourcemaps Enable和 web pack Hot模块替换插件( HMR )。style-loader
已经支持 HMR。 因此,热模块替换将工作在框中。
设置:
style-loader
。css-loader
。/.css$/
加载程序:{ test:/.css$/, loaders: [ 'style?sourceMap', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }生产
在生产环境中,你希望将CSS块提取到单个样式表文件中。
优点:
devtool:"source-map"
和 css-loader?sourceMap
)警告:
设置:
安装 style-loader
。
安装 css-loader
。
安装 /.css$/
加载程序:
ExtractTextPlugin v1x:
{ test:/.css$/, loader:ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') }
ExtractTextPlugin v2x:
{ test:/.css$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:'css-loader?modules,localIdentName="[name]-[local]-[hash:base64:6]"' }), }
安装 extract-text-webpack-plugin
插件:
ExtractTextPlugin v1x:
newExtractTextPlugin('app.css', { allChunks:true})
ExtractTextPlugin v2x:
newExtractTextPlugin({ filename:'app.css', allChunks:true})
请参考演示或者 react-css-modules-examples以获得完整设置的示例。
Browserify请参阅 css-modulesify
。
使用 styles
属性覆盖默认组件样式。
使用 Table
组件进行解释:
importReactfrom'react';importCSSModulesfrom'react-css-modules';importstylesfrom'./table.css';classTableextendsReact.Component { render () { return<div styleName='table'><div styleName='row'><div styleName='cell'>A0</div><div styleName='cell'>B0</div></div></div>; } }exportdefaultCSSModules(Table, styles);
在这个例子中,CSSModules
使用 ./table.css
CSS模块来装饰 Table
组件。 当呈现 Table
组件时,它将使用 styles
对象的属性来构造 className
值。
使用 styles
属性,你可以覆盖默认组件 styles
对象 e.g.
importcustomStylesfrom'./table-custom-styles.css';<Table styles={customStyles} />;
可以互操作的CSS插件,可以扩展其他ICSS插件。 使用这里功能扩展默认样式 e.g.
/* 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: 10px010px10px; }
在本例中,table-custom-styles.css
有选择地扩展 table.css
( Table
组件的默认样式)。
有关工作实现的示例,请参考 UsingStylesProperty
示例。
styles
属性修饰组件 inherit styles
属性,描述CSS模块和CSS类之间的映射。
classextendsReact.Component { render () { <div><p styleName='foo'></p><p className={this.props.styles.foo}></p></div>; } }
在 above 示例中,styleName='foo'
和 className={this.props.styles.foo}
是等价的。
styles
属性设计用于启用循环和子组件的组件修饰。
styleName
不能用于定义将由另一个组件 e.g. 生成的ReactElement
的样式
importReactfrom'react';importCSSModulesfrom'react-css-modules';importListfrom'./List';importstylesfrom'./table.css';classCustomListextendsReact.Component { render () { let itemTemplate; itemTemplate= (name) => { return<li styleName='item-template'>{name}</li>; }; return<List itemTemplate={itemTemplate} />; } }exportdefaultCSSModules(CustomList, styles);
above 示例将不起作用。 CSSModules
用于装饰 CustomList
组件。 但是,它是 List
组件,它将呈现 itemTemplate
。
为此,修饰组件继承 styles
属性,你可以使用它作为常规的CSS模块对象。 因此,前面的示例可以重写为:
importReactfrom'react';importCSSModulesfrom'react-css-modules';importListfrom'./List';importstylesfrom'./table.css';classCustomListextendsReact.Component { render () { let itemTemplate; itemTemplate= (name) => { return<li className={this.props.styles['item-template']}>{name}</li>; }; return<List itemTemplate={itemTemplate} />; } }exportdefaultCSSModules(CustomList, styles);
如果在将子组件传递给呈现组件之前使用来修饰子组件,则可以在子组件中使用 styleName
属性,然后将它
importReactfrom'react';importCSSModulesfrom'react-css-modules';importListfrom'./List';importstylesfrom'./table.css';classCustomListextendsReact.Component { render () { let itemTemplate; itemTemplate= (name) => { return<li styleName='item-template'>{name}</li>; }; itemTemplate =CSSModules(itemTemplate, this.props.styles); return<List itemTemplate={itemTemplate} />; } }exportdefaultCSSModules(CustomList, styles);
/** * @typedefCSSModules~Options * @see{@linkhttps://github.com/gajus/react-css-modules#options} * @property{Boolean}allowMultiple * @property{String}handleNotFoundStyleName*//** * @param{Function}Component * @param{Object}defaultStyles CSS Modules class map. * @param{CSSModules~Options}options * @return{Function}*/
你需要使用 react-css-modules
。e.g. 来装饰你的组件
importReactfrom'react';importCSSModulesfrom'react-css-modules';importstylesfrom'./table.css';classTableextendsReact.Component { render () { return<div styleName='table'><div styleName='row'><div styleName='cell'>A0</div><div styleName='cell'>B0</div></div></div>; } }exportdefaultCSSModules(Table, styles);
就是这样 !
顾名思义,react-css-modules
与 ES7修饰器的语法是兼容的:
importReactfrom'react';importCSSModulesfrom'react-css-modules';importstylesfrom'./table.css'; @CSSModules(styles)exportdefaultclassextendsReact.Component { render () { return<div styleName='table'><div styleName='row'><div styleName='cell'>A0</div><div styleName='cell'>B0</div></div></div>; } }
太棒了 !
参考 react-css-modules-examples插件库以获得 web service设置的示例。
选项作为第三个参数提供给 CSSModules
函数。
CSSModules(Component, styles, options);
或者作为装饰器的第二个参数:
@CSSModules(styles, options);
allowMultiple
默认值:false
。
允许多个CSS模块名称。
当 false
时,以下将导致错误:
<div styleName='foo bar'/>
handleNotFoundStyleName
默认值:throw
。
当 styleName
无法映射到现有的CSS模块时,定义所需的操作。
可用选项:
throw
引发错误log
使用 console.warn
记录警告ignore
无提示忽略缺少的样式名称互操作的CSS插件兼容 CSS。 如果你使用预处理程序,你需要做的就是在加载程序链中添加预处理器,在 web pack的情况下,在加载器查询( 加载程序从右到左处理)的末尾安装 sass-loader
并添加 sass
:!
{ test:/.scss$/, loaders: [ 'style', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 'resolve-url', 'sass' ] }
要启用CSS源映射,请向CSS加载器和 sass-loader
添加 sourceMap
参数:
{ test:/.scss$/, loaders: [ 'style?sourceMap', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 'resolve-url', 'sass?sourceMap' ] }
CSS模块促进了组成 Pattern,组件中使用的每个CSS模块应该定义描述元素所需的所有属性,例如。xml。
.box { width: 100px; height: 100px; }.empty { composes: box; background: #4CAF50; }.full { composes: box; background: #F44336; }
组合使用语义增强标记和样式的分离,这在没有CSS模块的情况下很难实现。
因为CSS模块名是本地的,所以使用通用样式名( 如"空白"或者"全部") 是非常不错的,而没有"框-"前缀。
为了进一步了解CSS规则,我建议阅读关于 CSS模块和CSS模块的官方规范的reading。
在CSS和HTML中考虑相同的示例:
.box { width: 100px; height: 100px; }.box-empty { background: #4CAF50; }.box-full { background: #F44336; }
<divclass='box box-empty'></div>
这个 Pattern 出现了,OOCSS的出现。 这种实现的最大缺点是,几乎每次你想要更改样式时都需要更改 HTML。
文档的这一部分作为学习练习包括在一起,以扩大对课程成本的理解。 CSS模块支持使用 composes
关键字编写CSS模块的本地方法。 不需要CSS预处理器。
你可以使用 @extend
关键字和 Mixin指令,在SCSS中写入组合
使用 @extend
:
%box { width: 100px; height: 100px; }.box-empty { @extend %box; background: #4CAF50; }.box-full { @extend %box; background: #F44336; }
这将转换为:
.box-empty,.box-full { width: 100px; height: 100px; }.box-empty { background: #4CAF50; }.box-full { background: #F44336; }
使用 mixin:
@mixin box { width: 100px; height: 100px; }.box-empty { @includebox; background: #4CAF50; }.box-full { @includebox; background: #F44336; }
这将转换为:
.box-empty { width: 100px; height: 100px; background: #4CAF50; }.box-full { width: 100px; height: 100px; background: #F44336; }
CSS模块不限制你使用全局 CSS。
:global .foo {
}
然而,要谨慎使用全局 CSS。 对于CSS模块,只有少数有效的用于全局CSS的用例( 比如 )。 标准化插件)。
避免使用多个CSS模块来描述单个元素。 阅读关于类组合的信息。
也就是说,如果你需要使用多个CSS模块来描述一个元素,那么可以启用 allowMultiple
命令行选项。 当多个CSS模块用来描述元素时,react-css-modules
将为它在 styleName
声明中匹配的每个CSS模块添加一个惟一的类名,
.button { }.active { }
<div styleName='button active'></div>
这将同时映射互操作的CSS CSS类到目标元素。