react-css-modules,类名到CSS模块的无缝映射响应组件的inside,下载react-css-modules的源码_GitHub

文章标签:SEAM class-names react 类模块 modules Names component

Seamless mapping of class names to CSS modules inside of React components.

源代码名称:react-css-modules

源代码网址:http://www.github.com/gajus/react-css-modules

Git URL:

git://www.github.com/gajus/react-css-modules.git

Git Clone代码到本地:

git clone http://www.github.com/gajus/react-css-modules

Subversion代码到本地:

$ svn co --depth empty http://www.github.com/gajus/react-css-modules
Checked out revision 1.
$ cd repo
$ svn up trunk

响应CSS模块

Travis build status NPM version js-canonical-style

响应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模块插件
- web pack css-loader
有什么问题？
的实现方法。
使用情况
SASS，SCSS，LESS 和其他 CSS Preprocessors插件
- 启用 Sourcemaps
类组合函数
- 类组合解决什么问题？
- 使用 CSS Preprocessors的类组合
全局CSS插件
多个CSS模块插件

CSS模块

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 ！

web pack `css-loader`

模块是一种可以以多种方式实现的规范。 react-css-modules 利用现有的CSS模块实现 web service CSS加载程序。

什么问题？

web pack 加载器插件本身有几个缺点：

你必须使用 camelCase CSS类名称。
在构造 className 时，必须使用 styles 对象。
混合CSS模块和全局CSS类很麻烦。
对未定义的CSS模块的引用解析为不带警告的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 命名约定。
你不需要每次使用CSS模块时都引用 styles 对象。
全局CSS和CSS模块有明显的区别，e.g.

<div className='global-css' styleName='local-module'></div>

当 styleName 引用未定义的CSS模块( handleNotFoundStyleName 命令行选项) 时，会发出警告。
你可以强制每个 ReactElement ( allowMultiple 命令行选项) 使用一个单独的CSS模块。

实现

react-css-modules 扩展了目标组件的render 方法。方法将使用 styleName的值查找关联样式对象中的CSS模块，并将匹配惟一的CSS类名附加到 ReactElementclassName 属性值中。

太棒了！

用法

安装程序包括：

设置一个模块 bundler 加载互操作的CSS组件。
装饰组件使用进行组件的装饰。

模块 Bundler

基于web的web service web service开发

在开发环境中，你希望启用 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块提取到单个样式表文件中。

优点：

更少的样式标记( 较旧的IE 有限制)
CSS SourceMap ( 带有 devtool:"source-map" 和 css-loader?sourceMap )
并行请求的CSS
CSS缓存分离
更快的运行时间( LESS 代码和DOM操作)

警告：

其他HTTP请求
更长的编译时间
更复杂的配置
无运行时 public 路径修改
没有热模块替换

- extract-text-webpack-plugin

设置：

安装 style-loader。
安装 css-loader。
使用 extract-text-webpack-plugin 插件将CSS块提取到单个样式表中。

安装 /.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 无提示忽略缺少的样式名称

，SCSS，LESS 和其他 CSS Preprocessors

互操作的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' ]
}

启用 Sourcemaps

要启用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实现的类

文档的这一部分作为学习练习包括在一起，以扩大对课程成本的理解。 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模块不限制你使用全局 CSS。

:global .foo {
}

然而，要谨慎使用全局 CSS。对于CSS模块，只有少数有效的用于全局CSS的用例( 比如 )。标准化插件)。

多个CSS模块

避免使用多个CSS模块来描述单个元素。阅读关于类组合的信息。

也就是说，如果你需要使用多个CSS模块来描述一个元素，那么可以启用 allowMultiple 命令行选项。当多个CSS模块用来描述元素时，react-css-modules 将为它在 styleName 声明中匹配的每个CSS模块添加一个惟一的类名，

.button {
}.active {
}

<div styleName='button active'></div>

这将同时映射互操作的CSS CSS类到目标元素。

文章标签:COM 模块 react 类 component 组件 modules Names

上传人

glaucosydow

分享于 2018-03-14 22:32:57

栏目分类

GitHub

文章信息

浏览:0
评论:0

赞: 0
收藏:0
下载:0

评论请遵纪守法并注意语言文明，多给一些支持。

react-css-modules, 类名到CSS模块的无缝映射响应组件的inside

CSS模块

web pack `css-loader`

什么问题？

实现

用法

模块 Bundler

扩展组件样式

`styles` 属性

循环和子组件

装饰器

命令行选项

，SCSS，LESS 和其他 CSS Preprocessors

启用 Sourcemaps

类组合

类组合解决什么问题？

使用CSS实现的类

全局 CSS

多个CSS模块

上传人

栏目分类

文章信息

评论

相关文档

相关问题

专题

热门标签

react-css-modules, 类名到CSS模块的无缝映射响应组件的inside

CSS模块

web pack css-loader

什么问题？

实现

用法

模块 Bundler

扩展组件样式

styles 属性

循环和子组件

装饰器

命令行选项

，SCSS，LESS 和其他 CSS Preprocessors

启用 Sourcemaps

类组合

类组合解决什么问题？

使用CSS实现的类

全局 CSS

多个CSS模块

上传人

栏目分类

文章信息

评论

相关文档

相关问题

专题

热门标签

web pack `css-loader`

`styles` 属性