React CSS Modules

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return 

            

                
A0
                
B0
            
        
;

    

        
A0
        
B0
    

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

class Table extends React.Component {
    render () {
        return 

            

                
A0
                
B0
            
        
;
    }
}

export default CSSModules(Table, styles);

实现

react-css-modules 扩展了目标组件的 render 方法。它将根据 styleName 的值在关联的 style 对象中查找对应的 CSS Modules，并为 ReactElement className 属性值添加相匹配的独一无二的 CSS 类名。

碉堡了！

你可以参照下这个例子进一步加深印象，react-css-modules-examples。

用法

设置包括：

• 设置一个 module bundler 加载 Interoperable CSS。
• 使用 react-css-modules 修整你的组件。

如何设置一个 module bundler呢？

webpack

开发模式

开发环境下，若你想启用 Sourcemaps，并要使用 webpack 的 Hot Module Replacement (HMR，热替换)。style-loader 已经支持 HMR。因此，Hot Module Replacement 开箱即用。

设置步骤：

• 安装 style-loader。
• 安装 css-loader。
• 设置 /\.css$/ 加载器，如下：

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

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}

new ExtractTextPlugin('app.css', {
    allChunks: true
})

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

class Table extends React.Component {
    render () {
        return 

            

                
A0
                
B0
            
        
;
    }
}

export default CSSModules(Table, styles);

import customStyles from './table-custom-styles.css';

;
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;
}
 이 예에서 styles 선택한 확장 styles (table-custom-styles.css 구성 요소의 기본 스타일) 이 있습니다.이것은 더욱 직관적인 실천 예이다: Using Styles Property example.table.css 속성이 포장된 구성 요소는 Table 속성을 계승하고 이 속성은 CSS 모듈과 CSS 클래스 간의 매핑 관계를 설명한다.
class extends React.Component {
    render () {
        

            

            

        
;
    }
}
 위 예에서 style와 styles는 등가이다.styleName='foo' 속성은 className={this.props.styles.foo} 부품 포장을 실현하기 위해 특별히 설계되었습니다!Loops and Child Componentsstyles는 다른 구성 요소에서 생성된 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 
{name}
;
        };

        return ;
    }
}

export default CSSModules(CustomList, styles);
 위의 인스턴스는 작동하지 않습니다.CSSModules는 구성 요소 포장Loops and Child Components에 사용됩니다.그러나 이것은 styleName 목록 구성 요소입니다.이 문제를 해결하기 위해 포장된 구성 요소는 스타일 속성을 계승하여 일반적인 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 
{name}
;
        };

        return ;
    }
}

export default CSSModules(CustomList, styles);
 하위 구성 요소를 렌더링 구성 요소에 전달하기 전에 CustomList 이 하위 구성 요소를 포장하면 이 하위 구성 요소에서 itemTemplage 속성을 사용할 수 있다.예를 들어 
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 
{name}
;
        };

        itemTemplate = CSSModules(itemTemplate, this.props.styles);

        return ;
    }
}

export default CSSModules(CustomList, styles);
포장
/**
 * @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}
 */
당신은 CSSMmodules으로 당신의 부품을 포장해야 합니다. 예를 들어 
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return 

            

                
A0
                
B0
            
        
;
    }
}

export default CSSModules(Table, styles);
이렇게 간단합니다!말 그대로 styleName와 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 

            

                
A0
                
B0
            
        
;
    }
}
 그야말로 토치카다!웹팩으로 구축된 예시가 있습니다.react-css-modules-examples Optionsreact-css-modules 함수에서 세 번째 인자의 위치에 옵션을 제공했습니다.
CSSModules(Component, styles, options);
 또는 두 번째 인자로: 
@CSSModules(styles, options);
react-css-modules 기본값: CSSModules.여러 스타일 모듈의 이름을 허용합니다.allowMultiple, 다음은 오류를 일으킬 수 있습니다.

errorWhenNotFound
  ：true。
   styleName             CSS Module         。
SASS, SCSS, LESS      CSS     
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를 열고 CSS Sourcemaps를 열려면 false와 false에 파라미터css-loader
{
    test: /\.scss$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass?sourceMap'
    ]
}
를 추가해야 한다. 클래스 조합 CSS Mosules는 클래스 조합 모드를 추진한다. 즉, 구성 요소에 사용되는 모든 CSS 모듈은 하나의 요소에 필요한 모든 속성을 정의해야 한다.예를 들어 
.box {
    width: 100px;
    height: 100px;
}

.empty {
    composes: box;

    background: #4CAF50;
}

.full {
    composes: box;

    background: #F44336;
}
 클래스 조합은 표기와 의미화 양식의 더욱 좋은 분리를 추진했고 CSS 모델스가 없으면 이 점은 실현하기 어렵다.CSS 모듈의 클래스 이름은 로컬이기 때문에'empty'나'full'같은 일반적인 클래스를 사용할 수 있습니다.'box-'접두사를 붙이지 않아도 됩니다. 완벽합니다!!더 많은 조합 규칙을 배우고 싶다고요?Glen Maddern의 CSS Modules에 관한 글과 공식 문서 spec of the CSS Modules를 읽어보시기 바랍니다.클래스 그룹은 어떤 문제를 해결했습니까?생각해 보면 다음과 같은 예가 있다. 
.box {
    width: 100px;
    height: 100px;
}

.box-empty {
    background: #4CAF50;
}

.box-full {
    background: #F44336;
}

      OOCSS   ，           ，        ，          HTML。
         CSS     
          ，            。CSS Modules         ，         CSS Mosules    composes       。CSS         。
  SCSS        @extend    ，    Mixin Directives    ，  ：
   @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;
}
mixins: 
@mixin box {
    width: 100px;
    height: 100px;
}

.box-empty {
    @include box;

    background: #4CAF50;
}

.box-full {
    @include box;

    background: #F44336;
}
를 컴파일한 후에 다음과 같다. 
.box-empty {
    width: 100px;
    height: 100px;
    background: #4CAF50;
}

.box-full {
    width: 100px;
    height: 100px;
    background: #F44336;
}
 전역 스타일 CSS Modules는 전역 CSS 사용을 제한하지 않는다.용법은 다음과 같다. 
:global .foo {

}
 그러나 전체적인 스타일을 조심스럽게 사용하세요.CSS Modules를 사용하는 동안 전역 스타일(예: normalization)은 소수의 경우에만 사용됩니다.여러 CSS Modules에서는 여러 CSS Modules를 사용하여 개별 요소를 설명하지 않습니다.본 문서 앞의 클래스 조합 부분에 대한 설명을 보십시오.그러나 굳이 여러 개의 CSS 모듈을 사용해서 원소를 설명하려면 sass-loader 옵션을 켜십시오.(문서의 앞 옵션 섹션 참조).여러 개의 CSS 모듈이 하나의 요소를 설명하는 데 사용될 때 sourceMap, allowMultiple 성명에 일치하는 모든 CSS 모듈에 유일무이한 클래스 이름을 추가합니다.예: 

.button {

}

.active {

}


   Interoperable CSS   CSS class          。