在使用umiJs创建的应用中,默认使用到了CSSModules,用起来虽然没常规 CSS 那么方便,但也带来了很好好处,如样式作用域等
所以现在更加系统等学习下CSSModules
怎么起一个独一无二等class名称
CSSModule在使用方法
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};
全局作用域
.title {
color: red;
}
:global(.title) {
color: green;
}
:global(.className) 这样声明的class是全局的
import React from 'react';
import styles from './App.css';
export default () => {
return (
<h1 className="title">
Hello World
</h1>
);
};
样式的继承
composes关键字
.className {
background-color: blue;
}
.title {
composes: className;
color: red;
}
react-css-modules
简化写法