Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

Just a caveat, I’ve been forgetting things lately

To use absolute paths for images in SCSS, add ~

background-image: url(~assets/login.png);
Copy the code

Let’s demonstrate CSS style contamination

1, first of all, we write the structure in the APP component, and import app. SCSS, import Login component

import './App.scss';
import Login from './Login'
function App() {
return (
<div className="App">
  <div className="box">
    APP
  </div>
  <Login></Login>
</div>
);
}
export default App;
Copy the code

2. Write structure in Login page

import React from 'react'
const Func = () => {
return <div className="box">
    Login
</div>
};
export default Func
Copy the code

3. Write styles in app. SCSS

.box {
height: 200px;
width: 200px;
background-color: yellow;
}
Copy the code

Code run result

We found that the box in Login also styles, but the Login component does not import the app.scss file. Why?

React will place every style file inheadInside, the APP and Login components are imported into the project when routing is configured, so the component styles are imported into the project, that is, all the final style files are collected into the projectindex.htmlIn the now. If there is duplication of selectors in styles for multiple components, styles in one component will also work in another, causing the problem of styles overwriting each other.

The React scaffolding is integrated and can be used directly. Scoped CSS is used by default in vue.

1. Change the style file name. SCSS from xx.scSS -> xx.module. SCSS (this is the convention in React scaffolding, distinguished from normal CSS)

2. Import the style file into the component (note syntax)

import styles from './index.module.scss'
Copy the code

3. Set styles by accessing the style name in the object using the styles object

import styles from './App.module.scss';
import Login from './Login'
function App() {
return (
<div className="App">
  <div className={styles.box}>
    APP
  </div>
  <Login></Login>
</div>
);
}
export default App;
Copy the code

This solves the style contamination problem! The principle is that CSS Modules automatically complement the CSS class name to ensure the uniqueness of the class name, so as to avoid style conflicts.

By default, the class name is complemented by CSS Modules to ensure that the class name is uniqueMaster CS modules – Maintenance class names

Each class name is changed without any processing.

If you want a class name to remain unchanged, use: global. As follows:

The global class name will remain unchanged and will not be changed

Maintain application scenarios for class names

When we want to override the style of a third-party component, we need to add global to the class name of the third-party component

:global(.ant-btn) { color: red ! important; }Copy the code

Best practices for daily development

In the corresponding index.module. SCSS

// index.module.scss .root { display: 'block'; position: 'absolute'; // Here, use global to wrap the class names of other child nodes. In this case, the class names are not processed, and when used in JSX, the class name can be a string, if not :global, Global {.title {.text {} span {}}.login-form {... }}}Copy the code

It’s easy to use in components

Import styles from './index.module. SCSS 'const component = () => {return ({/* (1) root nodes use CSSModules form class names (root element class names: 'root') */} <div className={styles.root}> {/* (2) all children, Use common CSS class names */} <h1 className="title"> <span className="text"> Login </span> < SPAN > Login </span> </h1> <form className="login-form"></form> </div> ) }Copy the code