0

How do I apply class name wildcard styles with UseStyles? I want to apply this CSS, with all class names prefixes with MuiFormHelperText.

  const useStyles = makeStyles({
    helperText: {
      '& .MuiFormHelperText-root': {
        height: '0',
        marginTop: '0',
      },
    },
  });

Currently, in execution the actual css Class Name is class="MuiFormHelperText-root-1638 in Chrome Inspector. It appends numbers at the end.

mattsmith5
  • 540
  • 4
  • 29
  • 67

2 Answers2

1

Try this

const useStyles = makeStyles({
  helperText: {
    '*[class^="MuiFormHelperText-root"]': {
      height: '0',
      marginTop: '0',
    },
  },
})

OR

const useStyles = makeStyles({
  helperText: {
    '&[class^="MuiFormHelperText-root"]': {
      height: '0',
      marginTop: '0',
    },
  },
})
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • can you try in relation to this question and update answer if possible? its not working for me, is it working in your code base? currently not in mine, thanks https://stackoverflow.com/questions/37508029/adding-errortext-to-material-ui-textfield-moves-other-elements – mattsmith5 Aug 30 '22 at 04:59
0

What about using CSS wildcards like this?

const useStyles = makeStyles({
  helperText: {
    'div[class^="MuiFormHelperText-root"]': {
      height: '0',
      marginTop: '0',
    },
  },
})
gazdagergo
  • 6,187
  • 1
  • 31
  • 45
  • Thanks, it may not need div, so I may remove that. Thanks – mattsmith5 Aug 30 '22 at 01:42
  • There should be something before the brackests `[]`. If not `div` than use `*`. – gazdagergo Aug 30 '22 at 01:44
  • If you wanna use the `&` nested selector (to refer the component itself and not a child) I think you can use this way: `&[class^="MuiFormHelperText-root"]`. – gazdagergo Aug 30 '22 at 01:51
  • can you try in relation to this question and update answer if possible? its not working for me, is it working in your code base? currently not in mine, thanks https://stackoverflow.com/questions/37508029/adding-errortext-to-material-ui-textfield-moves-other-elements – mattsmith5 Aug 30 '22 at 04:59