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


上一篇:react-native中验证码输入框的使用—react-native-confirmation-code-field


下一篇:简述如何在web页面引用mapbox的静态地图