React js中各个组件的css隔离

npm install react-css-modules --save

css
.button {
  background-color: #ff0000;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
}

css
.button {
  composes: button from './button.module.css';
}

javascript
import React from 'react';
import styles from './button.module.css';
const Button = () => {
  return (
    Click me!
  );
}
export default Button;

javascript
import React from 'react';
import Header from './Header';
import Content from './Content';
const App = () => {
  return (
    
      
      
    
  );
}
export default App;

css
.header {
  background-color: #333333;
  color: #ffffff;
  padding: 20px;
}

javascript
import React from 'react';
import styles from './Header.module.css';
const Header = () => {
  return (
    
      
My Website
    
  );
}
export default Header;

css
.content {
  background-color: #f2f2f2;
  padding: 20px;
}

javascript
import React from 'react';
import styles from './Content.module.css';
const Content = () => {
  return (
    
      
Welcome to my website!
    
  );
}
export default Content;