material ui "sx" prop and computed values-CodePudding

I have this Fab I'm mapping and I want the color to change based on if it is clicked. But the issue I'm having is that the text color can only be changed inside this sx property and I'm not sure why.. Also it won't allow me to apply this conditional inside the sx prop.

If I can not have this conditional here how can I override the default value? because className is not allowing me to over ride the css "color" value.

The goal is to have an active fab with changed css values to stand out.

 {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>

CodePudding user response：

The sx should be in that form in order to work.

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

Notice the place of the curly braces.

OR if you don't want to use sx then you can use className , but inside the css file, you have to add !important at the end of the property. For example:

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