Colouring an icon inside a chip doesn't work

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behaviour 😯

I set the colour of a Chip to secondary, then gave it an icon & tried to set the icon’s colour using the sx prop, because it is not a theme colour. But this colour is overridden by a class with higher specificity setting it back to inherit, and I can’t seem to get to something that has a higher specificity easily.

This is the devtools showing the classes attached:

My color: orange is being overridden 🙁

Expected Behaviour 🤔

Should look like:

I’m not entirely sure if there is a better way to do this, but from what I can see there isn’t. I’ve not been using MUI for very long, but really like it so far 👍

Steps to Reproduce 🕹

Codesandbox: https://codesandbox.io/s/admiring-ptolemy-2lies

<Chip
    variant={"outlined"}
    label={"Tool 1"}
    color={"primary"}
    icon={<CircleIcon sx={{color: orange}}/>}
/>

Context 🔦

I’m creating a graph legend, using recharts. Working on a my own new UI powered by Material UI for OctoPrint

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.16.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.77  (Using New MS Edge 91)
    Edge: Spartan (44.19041.964.0), Chromium (91.0.864.41)
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @material-ui/core: ^5.0.0-alpha.35 => 5.0.0-alpha.35
    @material-ui/icons: ^5.0.0-alpha.35 => 5.0.0-alpha.35
    @material-ui/private-theming:  5.0.0-alpha.35
    @material-ui/styled-engine:  5.0.0-alpha.34
    @material-ui/system:  5.0.0-alpha.35
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.35
    @material-ui/utils:  5.0.0-alpha.35
    @types/react:  17.0.9
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.3.2

[siriwatknp]

Another way to do it is to add double ‘&&’ to sx. That will create enough specificity higher than the parent. Both ways work!

<Chip
  label="Content"
  color="primary"
  icon={<CircleIcon sx={{ "&&": { color: "orange" } }} />}
/>

https://codesandbox.io/s/prod-sunset-n7isd?file=/src/Demo.tsx:248-367

[siriwatknp]

Isn’t this a bug? Why is this closed?

I don’t think this is a bug. However, this can be improved with CSS variables in the near future.