帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签: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
  • react-css-modules源代码文档
  • 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 statusNPM versionjs-canonical-style

    响应CSS模块实现CSS模块的自动映射。 每个CSS类都被分配一个具有全局惟一名称的本地作用域标识符。 CSS模块支持模块化和可以重用的CSS !

    注:

    如果你考虑使用 react-css-modules,请评估 babel-plugin-react-css-modules 是否覆盖你的用例。babel-plugin-react-css-modulesreact-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模块插件非常出色。 如果你不熟悉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>

    实现

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

    太棒了

    用法

    安装程序包括:

    模块 Bundler

    基于web的web service web service开发

    在开发环境中,你希望启用 Sourcemaps Enable和 web pack Hot模块替换插件( HMR ) 。style-loader 已经支持 HMR 。 因此,热模块替换将工作在框中。

    设置:

    {
     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-modulesES7修饰器的语法是兼容的:

    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  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语