React -- 样式处理

前端之家收集整理的这篇文章主要介绍了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>
        ); 
    }
}
原文链接:https://www.f2er.com/react/303720.html

猜你在找的React相关文章