Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...