How does React privatize component internal styling

Recently, I was working on a React project, and the styles between components interfered with each other, which caused me trouble.

I found several methods, but it didn’t work very well.

Until…

// Use CSS Modules

The key is to add a.module suffix to the end of the CSS file to indicate that it is private. Very simple, very rough, very fragrant. The recommendation factor is 5 stars.

import React, { Component } from 'react'; import styles from './Button.module.css'; // Add a.module to the end of the CSS file import './another-stylesheet. CSS '; Class Button extends Component {render() {// Reference as a JS object return < Button className={styles.error}>Error Button</button>; }}Copy the code