我有一个自定义框组件，我希望用户能够通过传递className prop来覆盖默认样式。问题是，基本样式永远不会被覆盖，但基类中尚未存在的样式会应用到组件中。我希望这样的场景，如果基类的背景颜色为“蓝色”，而用户传递的背景颜色为“红色”，用户的值应优先
Box.js

import styles from "./Box.module.css";

const Box = ({ className }) => {
  const classnames = [styles.base, className].join(" ").trim();
  return <div className={classnames}></div>;
};

export default Box;

Box.module.css

.base {
  height: 25rem;
  width: 25rem;
  background-color: blue;
}

App.js

import styles from "./App.module.css";
import Box from "./components/Box";

function App() {
  return (
    <div>
      <Box className={styles.red} />
    </div>
  );
}

export default App;

App.module.css

.red {
  background-color: red;
}

我注意到在App.js中将样式导入移动到Box导入下面，使得背景总是“红色”。