CSS 模块中的普通字符串类名

Question

有没有什么方法可以使用 css 模块在 React 上编写普通类型的类名。就像我想写 className="Foo Bar" 避免 className{ ${foo} ${bar} of CSS Module.

Answer 1

会不会凝聚成一个，比如：

const myClass = `${foo} ${bar}`;

和

<div className={myClass} />

解决方案？

另一方面，如果您使用的是样式组件，则应将这些 class 称为

const myClassStyle = styled.css`${foo} ${bar}`;
const myComponent = styled.div`${myClassStyle}`;

让它发挥作用

Answer 2

className="Foo Bar" 当您检查元素时，您会注意到，该元素已分配 class Foo 和 Bar.

CSS 模块的工作方式，如果您在任何元素上分配 class Foo，那么您可以检查它是否已被分配 class，例如，Foo_asd113d3__random_string.

这就是 className="Foo Bar" 在 CSS 模块中不起作用的原因

Normal string className in CSS module