Next JS条件样式未生效：错误状态文本颜色不显示求助

我想在errors.invoiceDate为true时，给下面的label标签加上红色文本样式（text-[#EC5756]）：

<label className={`${darkModeActive ? 'text-brand-five' : 'text-brand-seven'} ${errors.invoiceDate ? 'text-[#EC5756]' : ''}`} htmlFor="invoiceDate">
   Invoice Date
</label>

目前这个类已经成功添加到DOM中，但文本颜色并未改变，怀疑是其他样式类与其冲突。奇怪的是修改颜色值并保存文件时样式会生效，但重启开发服务器后问题会再次出现，求更优的实现方式？

解决方案 #

1. 强制提升自定义颜色类优先级 #

用Tailwind的!前缀强制提升错误颜色类的优先级，直接覆盖默认主题色：

<label className={`${darkModeActive ? 'text-brand-five' : 'text-brand-seven'} ${errors.invoiceDate ? '!text-[#EC5756]' : ''}`} htmlFor="invoiceDate">
   Invoice Date
</label>

这个语法是Tailwind原生支持的，能快速解决样式权重冲突问题。

2. 将自定义颜色注册到Tailwind配置 #

把错误红色加入tailwind.config.js的主题颜色配置里，让Tailwind预编译该颜色，避免动态生成类的缓存问题：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'error-red': '#EC5756',
      },
    },
  },
}

之后代码里直接使用预定义的类名：

<label className={`${darkModeActive ? 'text-brand-five' : 'text-brand-seven'} ${errors.invoiceDate ? 'text-error-red' : ''}`} htmlFor="invoiceDate">
   Invoice Date
</label>

这种方式更符合Tailwind的最佳实践，也不会出现重启服务器后样式失效的情况。

3. 重构条件渲染逻辑 #

直接让错误状态的样式完全替代默认主题色类，从根源避免样式叠加冲突：

<label 
  className={errors.invoiceDate 
    ? 'text-[#EC5756]' 
    : darkModeActive ? 'text-brand-five' : 'text-brand-seven'
  } 
  htmlFor="invoiceDate"
>
   Invoice Date
</label>

这样错误状态下不会同时加载主题色类和错误色类，自然就没有冲突问题。

内容的提问来源于stack exchange，提问作者sgledhill