Next.js中如何添加条件样式？条件写法样式不生效是什么原因？

问题原因 #

核心是JavaScript运算符优先级逻辑错误：
+ 运算符的优先级高于 == 运算符，你的代码实际执行顺序为：

1. 先拼接 styles.container0 + " " + props.isLightGreenBackground 得到完整字符串
2. 再将该字符串与 true 做相等判断
3. 最后根据判断结果返回类名，和你预期的「先判断条件再拼接类」的逻辑完全不符，因此条件样式不生效。

修复方案 #

你可以任选以下任意一种方式修改：

• 方案1：给三元判断加括号调整优先级（最小改动）
  给条件判断部分套括号，让它优先执行：

  function Stroke2TextAndImage(props: Stroke2TextAndImageProps) {
    return (
      <div
        className={
          styles.container0 + " " + (props.isLightGreenBackground === true
            ? styles.isLightGreenBackground
            : "")
        }
      >
  

  提示：布尔值判断建议用严格相等===，避免隐式类型转换带来的异常，空条件直接返回空字符串即可，无需多余空格

• 方案2：用ES6模板字符串（写法更简洁）
  模板字符串的写法逻辑更直观，不易出优先级问题：

  className={`${styles.container0} ${props.isLightGreenBackground ? styles.isLightGreenBackground : ''}`}
  

• 方案3：数组拼接（适合多条件类场景）
  后续需要新增多个条件类时，数组的方式维护性更高：

  className={[
    styles.container0,
    props.isLightGreenBackground && styles.isLightGreenBackground
  ].filter(Boolean).join(' ')}
  

  filter(Boolean)会自动过滤掉false、undefined等无效值，避免生成多余空格。

• 方案4：clsx工具类（复杂多条件场景推荐）
  项目有大量动态样式拼接需求时，可以用轻量工具库clsx处理类名拼接：

  import clsx from 'clsx'
  
  className={clsx(
    styles.container0,
    { [styles.isLightGreenBackground]: props.isLightGreenBackground }
  )}
  

内容的提问来源于stack exchange，提问作者János