基本样式设置
可以通过直接设置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会@R_301_344@:
// 渲染为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>
);
}
}