CODEWITHSUNDEEP
reactjsmaterial-ui
Jason H
Jason H

Reputation: 65

material ui "sx" prop and computed values

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

Upvotes: 3

Views: 3579

Answers (1)

Mohamed Salah
Mohamed Salah

Reputation: 299

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

Upvotes: 6

Related Questions