在 React 中将三元运算符与 JSS 和 Material-UI 结合使用

Question

我希望能够根据某些规则使用特定的 CSS 样式。

我使用这个例子只是为了简化它。

const num = 3

const useStyles = makeStyles({
  root: {
    color: [num <= 5 ? "red" :"blue"]
  }
});

颜色应该是红色，但输出不是我想要达到的效果。事实上，无论我将数字设置为多少，它都只会呈现蓝色。我在这里遗漏了什么吗？

Answer 1

颜色值应该是字符串而不是字符串数组。改为

color: num <= 5 ? 'red' : 'blue'

解决您的问题。

Using ternary operator with JSS and Material-UI in React