材料ui "sx“支柱和计算值

Question

我有这个Fab，我正在映射，我想要改变的颜色，如果它被点击。但是我的问题是，文本的颜色只能在这个sx属性中被改变，我不知道为什么。而且，它也不允许我在sx支柱中应用这个条件。

如果这里不能有此条件，如何覆盖默认值？因为className不允许我覆盖CSS "color“值。

目标是拥有一个具有更改的CSS值的活动fab来脱颖而出。

​

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;}