问题标签 [class-names]

我正在尝试使用类名 npm 库有条件地呈现类名，并且在 DOM 中似乎它们正在被添加，但我无法看到这些类背后的 CSS 效果。我主要是试图改变边界条件。

下面是 useStyles 中带有 CSS 的相关类：

下面我尝试设置条件以设置类名的状态并尝试在代码中使用它们（短片段）：

在 DOM 中，我注意到类名被正确识别，但不幸的是这些类没有任何效果。

我正在使用带有purgeCSS和 Webpack 的类名。

显然 PurgeCSS 不能自己处理这些类名。如何实现过滤classnames()函数中定义的类名的提取器？

我的 webpack.config.js 在答案中，因为我无法将其保存在这里

在下面的 html 中，我可以根据 message.error 或 message.info 选择应用引导类、alert-danger 或 alert-primary。目标类是引导类，它按预期工作。

现在，如果 message.error 为真，我想应用 css 文件中的样式 $(styles.activeDiv) 来代替 alert-danger。换句话说，我想用 $(styles.activeDiv) 替换 alert-danger。我该怎么做呢。

我正在使用 react 并遇到需要备用 CSS 属性的情况。

普通的 CSS 代码：

目前，我通过使用两个不同的类并将这两个类添加到组件（使用classnames库）来完成它。像这样：

wherec1和c2都具有位置属性，但具有不同的值。

我的问题是我是否以正确的方式做这件事？如果没有，是否有任何解决方法？

我有一个带有博客的 Gatsby 项目。我有一个标签云部分，显示博客文章的标签。我在实际的博客帖子卡片上还有一个按钮/标题，我想设置与标签云中相应标签相同的样式，即如果标签云中有“新闻稿”的红色标签，我想设置所有博客帖子的样式与新闻稿有关的卡片有一个红色按钮，如果标签云中有一个“入门”的蓝色标签，那么我想将所有带有“入门”标签的博客帖子卡的样式设置为蓝色，依此类推。

我有一个 PostCard 组件，其中设置了博客明信片的样式。我正在使用Classnames库根据标记的值应用 CSS 样式，如下所示：

上面的代码将标签的默认样式设置为postCardTags（我已设置为蓝色），并将值为“新闻稿”的标签设置为红色。

当我在本地运行它时，localhost:8000/它正确地应用了样式，“新闻稿”标签被正确地设置为红色。当我推送到生产环境时，值为“新闻稿”的标签没有正确地将其 CSS 类设置tagStyles.red为蓝色。出于某种原因tagStyles.red，当项目在本地运行时设置为“新闻稿”标签，但当推送到生产环境时，“新闻稿”标签设置为蓝色（即styles.postCardTags）。

为什么我的“新闻稿”标签tagStyles.tagRed在打开时应用样式，但在推送到实时站点时localhost应用类？styles.postCardTags这是 Gatsby 如何构建组件的问题吗？

我正在使用类名向 React 组件添加许多类。在我的按钮中，如果我愿意，我希望有机会向组件添加一个类，它应该是可选的。

但我得到一个类型错误，见附图

我怎样才能摆脱错误？

按钮代码

和错误：

A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)

举个例子，这个问题很容易理解。我想为https://npmjs.com/package/classnames实现一个严格类型保护的包装器，以检查我们的应用程序使用的 Tailwind 类名。

到目前为止，最接近的解决方案是这个例子：

此处提供的示例代码：游乐场链接

这可行，但错误与对象的特定键无关，而是与所有对象键相关。TypeScript 也会突出显示"block h-1"相同的错误：Type 'boolean' is not assignable to type 'never'..

如何进行输入以便 TS 能够检测到只有“bad-class”键是无效的 Tailwind 类字符串，但不能将“block h-1”突出显示为无效？

我的猜测是由于空格导致我看到了与空格类似的问题，但找不到适合我的解决方案

如何在每一行中添加一个类名而不影响其余行

正如这里提到的，我们可以更改占位符的颜色和透明度，但不能控制其他占位符参数。实际上，我们可以通过::placeholder在键入时添加className='text-2xl::placeholder', 但我正在使用带有 TypeScript 的顺风类名，我想使用or生成类名，或者（我检查过，它正在工作）::placeholder:placeholerplaceholder:

编写自己的插件

我想，我可以写一个插件，但它是相当复杂的方式，也许有一个包或这个插件已经存在？我搜索了，但没有发现任何有用的东西