CSS 模块中的普通字符串 className

Question

有没有办法使用 css 模块在 React 上编写普通类型的 className。 就像我想写 className="Foo Bar" 避免 CSS 模块的 className{ ${foo} ${bar} 。

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 模块中不起作用的原因