/* style.css */
.text {
  color: red;
  font-size: 14px;
}

/* style.global.css */
.text {
  display: inline-block;
}

/* component.jsx */
import clsx from 'clsx';
import styles from './styles.css';
import 'styles.global.css';

// 错误示例
function WrongExpample({ text }) {
  // color 和 fonts-size的样式不会生效
  return <span className='text'>{text}</span>;
}

// 正确示例
function TextComponent({ text }) {
  // color、font-size、display样式都生效
  return <span className={clsx('text', styles.text)}>{text}</span>;
}