React -- 样式处理

骑猪看日落 2022-06-13 00:12 209阅读 0赞

## 基本样式设置 ##

可以通过直接设置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>
            ); 
        }
    }