I have been trying to color the Autocomplete from MUI like the way i have described below based on some if conditions. Couldn’t find a way to do it.
you can try this
add MuiChip-label class in css
.MuiChip-label
{
color:#fff !important;
}
Autocomplete component has renderTags property which takes an array of selected values and return chips. Therefore, you can customize the chip color (by using predefined theme colors via color prop or setting background color with sx prop) based on your condition:
<Autocomplete
multiple
renderTags={(value: readonly string[], getTagProps) =>
value.map((option: string, index: number) => (
<Chip
key={index}
variant="outlined"
label={option}
sx={{background: value === "A" ? 'red' : 'green'}}
/>
))
}
...other props
/>