CSS Specificity on Chip and Avatar

[franklixuefei]

Not able to override the default CSS rules applied to <Avatar> component inside of a <Chip>

• 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 Behavior 😯

I tried to apply custom CSS rules to <Avatar> component that's consumed by the <Chip>, but my custom rules were overriden by the default rules.

Expected Behavior 🤔

My custom rules should win over the default rules.

Steps to Reproduce 🕹

Steps:
code:

     <Chip
        classes={{
          avatar: classes.avatar
        }}
        avatar={
          <Avatar className={classes.avatar}>
            <Typography>this is a long text</Typography>
          </Avatar>
        }
        label={'this is a label'}
      />
...
    avatar: {
      borderRadius: spacing(2),
      width: 'initial',
      padding: spacing(1)
    },
    // Note that if I specified "!important" after "initial", like "initial !important", it works.

Context 🔦

Note that it worked in v3.x

Your Environment 🌎

Tech	Version
Material-UI	v4.6.0
React	latest
Browser
TypeScript	latest
etc.

[oliviertassinari]

@franklixuefei You need to increase the specificity here. See #18156 for context.