将动态尾风类添加到反应组件（Next.JS + Tailwind + TS）

Posted 2023-03-07

【中文标题】将动态尾风类添加到反应组件（Next.JS + Tailwind + TS）

【英文标题】：Add dynamic tailwind class to a react component (Next.JS + Tailwind + TS)

【发布时间】：2022-01-02 16:03:06

【问题描述】：

我在尝试将动态顺风类分配给反应组件时遇到以下菜鸟问题。

我在tailwind.config.js 中扩展了我的主题颜色，如下所示：

...
theme: 
    extend: 
      colors: 
        blueGray: 
           50: '#f6f9f9',
          100: '#e4f1f8',
          200: '#c2e0f0',
          300: '#91c0db',
          400: '#5b9bbf',
          500: '#4479a3',
          600: '#385f87',
          700: '#2d4768',
          800: '#203049',
          900: '#131d2f',
       ,
       // OTHER COLORS
    ,
  ,
,
...

我的反应组件如下所示：

import Draggable from 'react-draggable';

type SensorProps = 
    name: string
    color: string


export default function Sensor(props : SensorProps): JSX.Element 
    return (
        <Draggable
            axis="both"
            bounds="flow-canvas">
             <div className=`border-$props.color-400  bg-$props.color-50 text-$props.color-700`>
              <p> props.name </p>
            </div>
        </Draggable>
    )

这是我如何实例化传感器组件的一些示例

<Sensor name="Water Level" color="blueGray" />
<Sensor name="Flow" color="mGreen" />

问题是类没有应用，但是当我检查我的页面时，div 有正确的类。

如果切换自：

<div className=`border-$props.color-400  bg-$props.color-50 text-$props.color-700`>

到：

<div className=`border-blueGray-400  bg-blueGray-50 text-blueGray-700`>

有效:(

我已经在使用顺风 JIT 编译器

...
mode: 'jit',
purge: ['./pages/**/*.js,ts,jsx,tsx', './components/**/*.js,ts,jsx,tsx'],
...

有什么建议吗？

【问题讨论】：

tailwindcss.com/docs/…, tailwindcss.com/docs/…

这能回答你的问题吗？ purgecss can't recognize conditional classes

【参考方案1】：

tailwind 编译器会在编译时解析您的代码以及在任何地方都看不到的 purges 类。您没有直接使用border-blueGray-400，因此它会将其视为未使用的类并将其从捆绑包中移除以提高性能。

我认为最好的解决方案是不要传递color、size 等任意属性，而是传递className 属性。

因此，你会像这样渲染你的组件：

<Sensor className="border-blueGray-400 bg-blueGray-50 text-blueGray-700" />

在子组件中：

<div className=props.className />

【讨论】：

谢谢@szaman，我完全忘记了顺风的清洁“未使用的css”功能。我将尝试 className 方法

我切换到 css 类并且一切正常，谢谢

【参考方案2】：

您可以使用 clsx 之类的库有条件地呈现类。然后您的子组件将呈现：

<div className=clsx(
  "border-blueGray-400 bg-blueGray-50 text-blueGray-700": props.color === "blueGray",
  "border-mGray-400 bg-mGray-50 text-mGray-700": props.color === "mGray",
) />

如果您只想修改一两个属性，这不是一个好的解决方案。然后我建议直接将顺风类作为道具传递，就像另一个答案中提到的那样。

但是如果你有一些更复杂的逻辑，比如依赖于类的多个 css 属性，这个解决方案可能会很好。

【讨论】：

感谢您的宝贵时间