材质 ui "sx" 属性和计算值

Question

我正在映射这个 Fab，我希望颜色根据单击情况而改变。但我遇到的问题是文本颜色只能在这个 sx 属性内更改，我不知道为什么。另外，它不允许我在 sx 属性中应用此条件。

如果我在这里不能有这个条件，我怎样才能覆盖默认值？因为 className 不允许我覆盖 CSS“颜色”值。

我们的目标是让一个活跃的工厂通过改变 CSS 值来脱颖而出。

activeFabs.map((item, i) => (
  <Fab
    key={i}
    variant="extended"
    className={classes.navbtns}
    sx={{
      maxHeight: 50,
      minWidth: 120,
      color: clicked === item.value ? 'linear-gradient(45deg, #A900A6, #A900A6)' : 'white',
      marginRight: 3,
    }}
    onClick={handleClick}
    value={item.value}
    name={item.value}
  >
    {item.text}
  </Fab>
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

应该sx采用这种形式才能工作。

sx={ clicked === item.value? {color:"red"} : {color:"pruple"} }

注意花括号的位置。

或者，如果您不想使用sx，则可以使用className，但在 css 文件内，您必须!important在属性末尾添加。例如：

.a{ color:'red' !important;}