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

Posted 2023-02-21

【中文标题】材质 ui“sx”道具和计算值

【英文标题】：material ui "sx" prop and computed values

【发布时间】：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>

【参考方案1】：

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

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

注意花括号的位置。

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

.a color:'red' !important;