React -- 样式处理

基本样式设置

可以通过直接设置className prop来确定类名以确定样式，或者通过style prop来设置行内样式。 需要注意的是，style prop需要是一个对象。

栗子：

const style = {
    color: 'white',backgroundImage: `url(${imgUrl})`,//注意如下写法，会自动转换为-webkit-transition 
    WebkitTransition: 'all',// ms是唯一小写的浏览器前缀
    msTransition: 'all',};
const component = <Component style={style} />;

样式中的像素值

当设置width和height时，可以不必添加px单位，React会自动添加：

// 渲染为height: 10px
const style = { height: 10 };
ReactDOM.render(<Component style={style}>Hello</Component>,mountNode);

使用classnames库

代码对比：
未使用：

class Button extends Component {
    // ...
    render() {
        let btnClass = 'btn';
        if (this.state.isPressed) { 
            btnClass += ' btn-pressed'; 
        } else if (this.state.isHovered) { 
            btnClass += ' btn-over'; 
        }
        return <button className={btnClass}>{this.props.label}</button>; 
    }
};

使用：

import classNames from 'classnames';
class Button 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

CSS Modules依旧使用CSS，但是使用JS来管理样式依赖。

使用CSS可能遇到的问题：

1、全局污染
2、命名混乱
3、依赖管理不彻底
4、JS与CSS无法共享变量
5、代码压缩不彻底

结合webpack的css-loader，就可以在CSS中定义样式，在JS文件中导入。

栗子：
css文件：

/* components/Button.css */
.normal { /* normal相关样式*/ } 
.disabled { /* disabled相关样式*/ }

js文件：

/* components/Button.js */
import styles from './Button.css';
console.log(styles);
// =>
// Object {
// normal: 'button--normal-abc5436',
// disabled: 'button--disabled-def884',
// }
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

最终生成的html：

<button class="button--normal-abc5436"> Processing... </button>

类名button–normal-abc5436是css按照localIdentName自动生成的class名称。经过这样的混淆处理后，class的名称基本就是唯一的。

CSS Modules对css中的class名都做了处理，使用对象来保存原class和混淆后的class的对应关系。

使用composes来组合样式

对于样式服用，CSSModules只提供了唯一的方式来处理：composes组合。

/* components/Button.css */ 
.base { /*通用样式*/ }

.normal { composes: base; /* normal类的其他样式 */ }

import styles from './Button.css';
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的HTML：

<button class="button--base-abc53 button--normal-abc53"> Processing... </button>

class命名技巧

样式名可以分为三个级别：
1、block: 对应模块名
2、element：对应模块中的节点名
3、modifier：对应节点的相关状态

栗子：dialog__confirm-button--highlight

一个结合React的栗子：

/* dialog.css */
.root {}
.confirm {} 
.disabledConfirm {}
/* dialog.js */
import React,{ Component } from 'react'; 
import classNames from 'classnames'; 
import styles from './dialog.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>
        ); 
    }
}