I have been trying to color the

CodePudding user response：

you can try this

add MuiChip-label class in css

.MuiChip-label
{
   color:#fff !important;
}

CodePudding user response：

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