如何使用CSS Modules结合三元运算符实现多条件元素样式设置？

首先，你的需求完全可行，只是原代码存在语法和逻辑细节问题，以下是具体修正方案：

1. 修正核心语法错误 #

原代码的className写法有三处问题：

• 模板字符串内多余了大括号，三元运算符嵌套语法混乱
• style.box未用${}包裹，无法正确解析CSS Modules生成的类名
• return后直接换行导致组件返回undefined，JSX需用括号包裹

2. 匹配场景的样式逻辑修正 #

根据你描述的三种状态，正确逻辑应为：

• 当前容器被hover → 应用大尺寸类style.hoveredBox
• 当前容器未被hover，但存在其他hover容器 → 应用中等尺寸类（原代码里的smallBox属于命名错误，需改为mediumBox）
• 无任何容器被hover → 应用默认小尺寸类style.smallBox

单个容器的修正代码：

import style from './styles.module.sass'
import { useState } from 'react'

const Slider = () => {
  const [isHovered, setIsHovered] = useState(false);
  const [anyCardHovered, setAnyCardHovered] = useState(false)

  return (
    <div 
      className={isHovered ? style.hoveredBox : anyCardHovered ? style.mediumBox : style.smallBox}
      onMouseEnter={() => {
        setIsHovered(true)
        setAnyCardHovered(true)
      }}
      onMouseLeave={() => {
        setIsHovered(false)
        // 实际多容器场景需判断是否还有其他hover容器，此处为简化示例
        setAnyCardHovered(false)
      }}
    >
      {/* 容器内容 */}
    </div>
  )
}

3. 多容器场景的状态优化 #

如果是多个容器，建议用数组维护每个容器的hover状态，通过计算属性判断全局hover状态：

import style from './styles.module.sass'
import { useState } from 'react'

const Slider = () => {
  const boxCount = 3;
  // 数组存储每个容器的hover状态
  const [boxHovers, setBoxHovers] = useState(Array(boxCount).fill(false));
  // 计算是否有任意容器被hover
  const anyCardHovered = boxHovers.some(hover => hover);

  const handleBoxEnter = (index) => {
    const newHovers = [...boxHovers];
    newHovers[index] = true;
    setBoxHovers(newHovers);
  }

  const handleBoxLeave = (index) => {
    const newHovers = [...boxHovers];
    newHovers[index] = false;
    setBoxHovers(newHovers);
  }

  return (
    <div className={style.sliderContainer}>
      {boxHovers.map((isHovered, index) => (
        <div 
          key={index}
          className={isHovered ? style.hoveredBox : anyCardHovered ? style.mediumBox : style.smallBox}
          onMouseEnter={() => handleBoxEnter(index)}
          onMouseLeave={() => handleBoxLeave(index)}
        >
          容器 {index + 1}
        </div>
      ))}
    </div>
  )
}

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