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>
  }
}

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>    
  }
}

其它注意

全局样式：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。

CSS Modules只会转换class名相关的样式，即只会转变类选择器。所以id选择器或者其他属性选择器的样式不会被css modules进行转化。

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>
      )
    }
}

结合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中的样式处理

React中的样式处理

猜你喜欢