CSSModules

562 阅读1分钟

在使用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

react-css-modules

简化写法