Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

如何组织React组件样式

发布于:  

组件式开发已成为web发展的趋势, React 的组件开发,让我们专注于单个组件的逻辑开发,其中包括组件的样式。

命名约定

由于 css 定义具有全局性,一个组件的样式打包以后有可能影响到另一个组件的样式,于是我们通常会采用命名约定的方式。 比如:

@modal-prefix: 'alert';

.@{modal-prefix} {
	...
}

.@{modal-prefix}-title{
	...
}

这样先定义一个前缀,通常就能避免冲突。

import React, { Component } from 'react';  
import './modal.less';

export default class AlertModal extends Component {  
    render () {
        return <div className="modal-title">你好 -_-</div>;
    }
};

适用于任何项目中。

内联样式

把样式直接写进组件里,也就是inline style 。 这种方法有很多缺陷,如属性支持有限、用不了伪类、媒体查询、不同浏览器的相同属性前缀、动画等。 这种方法有很大的局限性。

scoped CSS

这是我目前项目中用的方式,一步一步记录下来,有可能以后还会变,前端发展好快。。。

scss 文件

.roleDescribe {
  color: #b3b3b3;
  margin-left: 20px;
}

组件中使用 首先声明

import React, { Component, PropTypes } from 'react'

import s from './privilege.scss';
import withStyles from '../../decorators/withStyles';
import cs from 'classnames';

@withStyles(s)
class Privilege extends Component {
	...
	render() {
		...
		<small className={s.roleDescribe}>({role.property})</small>
    }
}

withStyles 中的内容

import React, { Component, PropTypes } from 'react'

function withStyles(...styles) {
  return (BaseComponent) => class StyledComponent extends Component {
    static contextTypes = {
      insertCss: PropTypes.func.isRequired
    };

    componentWillMount() {
      this.removeCss = this.context.insertCss.apply(undefined, styles) // 这里的insertCss 是注入
    }

    componentWillUnmount() {
      this.removeCss()
    }

    render() {
      return <BaseComponent {...this.props} />
    }
  }
}

export default withStyles

contextinsertCss的定义 客户端:

const context = {
  insertCss: styles => styles._insertCss(),
  ...
};

服务端:

const css = [];
const context = {
  insertCss: styles => css.push(styles._getCss()),
  ...
};

通过webpack 各种loader 完 最终浏览器中使用的是这样的:

<small class="privilege_roleDescribe_3Dw" data-reactid=".3d160zirr4.0.0.1.1.0.0.0.0.0.0.1.$5.1">
...
</small>

end

先这样吧,以后项目中有更深入的理解再补充一下。


参考 如何科学的组织React组件样式

厚颜一下 ~^_^~

赏赐