Currently, I am working on a Fab component that changes color when clicked. However, I am facing an issue where the text color can only be modified within the sx property. I am unsure why this conditional cannot be applied inside the sx prop.
If I cannot use the conditional here, how can I override the default value? The className is not allowing me to change the CSS "color" property.
The main objective is to have an active fab button with customized CSS values to make it 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>