'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 |
|---|
