Css模块样式化的多个条件

Question

我试图用三元操作符设置多个条件，以使用Css模块样式元素。我找不到确切的语法。这可能吗?有些盒子有3种尺寸，默认的小尺寸，大尺寸用于鼠标悬停的那个，中尺寸用于至少一个鼠标悬停的那个。

import style from './styles.module.sass'
const Slider =()=>{
const [hover,isHovered]=useState(false);
const [anyCardHovered,setAnyCardHovered]=useState(false)
return 
<div className={`{ hover? ${style.hoveredBox}: anyCardHovered? ${style.smallBox}: style.box}`>

</div>

Answer 1

<div className={hover 
? style.hoveredBox
: anyCardHovered
? style.smallBox
: style.box
}></div>

---

的另一种方式:

/* Bits: hover, anyCardHovered */
const classNames = [
style.box,        // 00
style.smallBox,   // 01
style.hoveredBox, // 10
style.hoveredBox  // 11
];
<div className={classNames[hover << 1 | anyCardHovered]}>
</div>

更多细节见:https://blog.uidrafter.com/bitwise-table-lookup

Answer 2

我可能会创建一个名为classes的变量，并将其值和逻辑设置在JSX返回语句上方。然后，您可以简单地在您的框中设置classname={classes}。

let classes = 'small'; 
if(hover) {
classes = 'big'
} else if (anyCardHovered) {
classes = 'medium'
} else {
classes = 'small'
}