材质 ui“sx”道具和计算值答案

【问题标题】：material ui "sx" prop and computed values材质 ui“sx”道具和计算值
【发布时间】：2022-01-24 03:11:29
【问题描述】：

我有这个正在映射的 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

注意花括号的位置。

或者如果你不想使用sx，那么你可以使用className，但是在css文件中，你必须在属性末尾添加!important。例如：

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

【讨论】：