'pseudo selector after not working when nested in wild card class selector

I'm trying to make a custom TextField using MUI v4. After discovering that we cannot use [class selectors when using nested themes][1], we are trying to switch to class wildcard selectors they recommend in the answer. It seems like the pseudo selector after is no longer working when nested under a class wildcard selector.

.root {
  '& [class*="MuiInputBase-root"]': {
    height: '56px',
    '&::after': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      borderStyle: 'solid',
      borderColor: '#000000',
      borderWidth: '1px',
      borderRadius: '8px',
    },
  },
},

Even though it is working when not nested

.root {
  '& [class*="MuiInputBase-root"]::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderStyle: 'solid',
    borderColor: '#000000',
    borderWidth: '1px',
    borderRadius: '8px',
  },
},

I'm passing in the classes by spreading

const styles = useStyles();
<MuiTextField classes={...classes} />

Am I doing anything wrong? [1]: How reliable are MUI Global Class names in JSS?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source