In applications created using umiJs, CSSModules are used by default, and while not as convenient as regular CSS, they do offer some nice benefits, such as style scopes

So now let’s learn CSSModules more systematically

How can a unique waitclassThe name of the

CSSModule uses the method

import React from 'react';
import style from './App.css';

export default() = > {return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};
Copy the code

Global scope

.title {
  color: red;
}

:global(.title) {
  color: green;
}
Copy the code

A class declared like :global(.classname) is global

import React from 'react';
import styles from './App.css';

export default() = > {return (
    <h1 className="title">
      Hello World
    </h1>
  );
};
Copy the code

Style inheritance

Composes the keyword

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}
Copy the code

react-css-modules

react-css-modules

Simplify the writing