material ui - How to properly target the Matrial UI nested prop attributes?

Question

Even after having read the Material UI Customization rules, I haven't quite understood how to properly target nested elements.
Here is an example, where I am targeting the label of the <TextField> component. The styling for the label works, but the styling for when the label is shrinked does not.

const useStyles = makeStyles({
  label: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    right: '22px',
    bottom: '0px',
    '&.MuiInputLabel-shrink': {
      right: 'unset',
      color: 'green',
    },
    '&. MuiInputLabel-shrink': {
      right: 'unset',
      color: 'green',
    },
    '&.shrink': {
      right: 'unset',
      color: 'green',
    },
    '&.shrinked': {
      right: 'unset',
      color: 'green',
    },
  },
  '&.MuiInputLabel-shrink': {
    color: 'purple',
  },
});

question from:https://stackoverflow.com/questions/65907936/how-to-properly-target-the-matrial-ui-nested-prop-attributes

Answer 1

To target a the class 'shrink', this would be the correct usage:

    const useStyles = makeStyles({
      label: {
        '& .shrink': {
          right: 'unset',
          color: 'green',
        },
      },
    },

If this doesn't work for you - it may be an issue of specificity. Just as a test, I'd add the '!important' flag to the css to validate that you're styles are actually being applied.

You'll also have to apply object on the 'classes' prop of the material-ui component.

Hope this helps