如何在React JS(Next JS)中使用顺风CSS从应用程序的UI更改应用程序的主颜色[重复]

shstlldc 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(78)

此问题已在此处有答案：

Why can't I pass variable as a className to tailwind-css?（1个答案）
4天前关闭。
假设每个按钮的主颜色是bg-gray-600，我想将其更改为bg-indigo-600。我尝试使用模板文字，但它对UI没有影响。

const mycomponent = () => {
  const [color, setColor] = useState('blue');

  return (
    <>
      <button
        onClick={() => {
          setColor('gray');
        }}
      >
        Change color to gray
      </button>{' '}
      <div className={`bg-${color}-600 p-2`}> Hello world </div>{' '}
    </>
  );
};

字符串
上面的代码确实改变了类，但是颜色没有改变，但是当应用类bg-gray-600时，它没有模板字符串，然后它就工作了，我错过了什么？

next.js

来源：https://stackoverflow.com/questions/76798960/how-to-change-the-primary-color-of-the-app-from-apps-ui-in-react-jsnext-js-us

1条答案

按热度按时间

emeijp431#

根据文件：
Tailwind如何提取类名的最重要的含义是，它只会在源文件中找到作为完整的未断开字符串存在的类。
如果你使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

字符串
在上面的例子中，字符串text-red-600和text-green-600不存在，所以Tailwind不会生成这些类。相反，请确保您使用的任何类名都完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

型
您可以考虑：

使用完整的类名，如：

const mycomponent = () => {
  const [color, setColor] = useState('bg-blue-600');

  return (
    <>
      <button
        onClick={() => {
          setColor('bg-gray-600');
        }}
      >
        Change color to gray
      </button>{' '}
      <div className={`${color} p-2`}> Hello world </div>{' '}
    </>
  );
};

型

将类名添加到safelist：

module.exports = {
  …
  safelist: [
    { pattern: /^bg-(red|gray|blue)-600$/ },
  ],
  …
}

型

赞(0）回复(0）举报 2023-08-04

我来回答

如何在React JS(Next JS)中使用顺风CSS从应用程序的UI更改应用程序的主颜色[重复]

1条答案

相关问题

热门标签

最新问答