CSS 模块中的普通字符串 className

编程问答 2022-05-28

问题描述

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

解决方法

它是否可以凝聚成一个，例如：

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

和

<div className={myClass} />

解决方案？

另一方面，如果你使用样式组件，你应该像这样调用这些类

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

让它发挥作用

,

className="Foo Bar" 当您检查元素时，您会注意到，该元素分配了 Foo 和 Bar 类。

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

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

css-modulesjavascriptreactjsreactjsreactjsreactjs