如何在React项目中引入CSS_Module与组件样式结合

// Button.module.css
.primary {
  background: blue;
  color: white;
  padding: 10px;
}

// Button.jsx
import styles from './Button.module.css';
<p>function Button() {
return <button className={styles.primary}>点击</button>;
}</p><p>export default Button;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

body {
  margin: 0;
  font-family: sans-serif;
}

import './index.css'; // 全局生效
import styles from './Card.module.css';
<p>function Card() {
return <div className={styles.container}>内容</div>;
}</p>

<div className={`${styles.box} ${props.isActive ? styles.active : ''}`} />

import clsx from 'clsx';
// npm install clsx
<p><div className={clsx(styles.box, {[styles.active]: props.isActive})} /></p>

/* 在 .module.css 文件中 */
.container :global(.highlight) {
  color: red;
}
<p>:global(.no-margin) {
margin: 0;
}</p>

.error {
  padding: 8px;
  border: 1px solid #f00;
}
<p>.fatalError {
composes: error from './BaseStyles.module.css';
background: #fee;
}</p>