React中的样式处理

最近有在写react应用了，以前总是图简单，直接用inline style。趁着有空，总结一下除了inline style之外更优的react样式处理方法。

1.classname库

便于给组件动态设置className。

impoert React, { Componet } from 'react';import classNames from 'classnames';

class  extends Component {  render() {    const btnClass = classNames({      'btn': true,      'btn-pressed': this.state.isPressed,      'btn-over': !this.state.isPressed && this.state.isHovered,    });    return <button className={btnClass}>{this.props.label}</button>  }}

1. CSS Modules

   实现组件样式的局部作用域和模块依赖问题。
   使用方法 :
   webpack的css-loader内置了CSS Modules功能，所以使用CSS Modules首先要在webpack配置中启用css Modules，如下

css?modules&localIdentName=[name]__[local]-[hash:base64:5]

? 其中加上modules即为启用，localIdentName是设置样式的命名规则。
? 接着在组件文件中将css样式import进来使用即可。

.normal {  color: #eee;}import style from './styles.css';class Button extends Component {  render(){    return <button className={style.normal}></button>      }}

其它注意

1. 全局样式：CSS Module默认采用了局部样式，即样式外用:local包裹，生成的css名字附加了一串随机数，以此来实现样式的局部化。
   自己可以用:global来实现全局样式。

   :global(.btn) {…}// more than one syle in gloabl:global {.normal{ ...}.danger{ ... }}

   1. 样式复用：使用compose

.base{  //通用样式}.normal{    composes:base;      //normal独有样式}

? 此时使用了normal样式的元素或者组件实际会生成两个class。

1. CSS Modules只会转换class名相关的样式，即只会转变类选择器。所以id选择器或者其他属性选择器的样式不会被css modules进行转化。
2. CSS Mdoules结合classNames在react中的应用：
   

   ...import className from 'classnames';import styles from './styles.css'; class Dialog extends Component { render() { const cx = classNames({ confirm: !this.state.disabled, disabledConfirm: this.state.disabled, }); return ( <div className={styles.root}> <a className={styles[cx]}>Confirm</a> </div> ) }}

3. 结合react-css-modules库，避免重复输入styles.xx。
   

   //....import CSSModules from 'react-css-modules'; //... return ( <div styleName={root}> <a styleName={cx}>Confirm</a> </div> ) export default CSSModules(Dialog, styles);

其它：

ts中import css文件的时候报错。

解决方法：增加一个module definition告诉typescript可以import css文件。

declare module '*.css' {    const content: any;    export default content;}

原文:大专栏  React中的样式处理

原文地址：https://www.cnblogs.com/petewell/p/11614949.html