target pseudo selectors in material ui - css-selectors

Question

I'm wondering if there's a way to target psedo selectors (::before, ::after) in material ui?
For example, in a component like this?
const useStyles = makeStyles((theme) => ({
root: {
textAlign: 'center',
'&::before': {
content: '"blabla"'
},
'&::after': {
content: '"blabla"'
},
':before': {},
after: {}
}
}));
function App(props) {
const classes = useStyles();
return (
<Typography
className={{ root: classes.root, before: classes.before, after: classes.after }}>
{props.children}
</Typography>
);
}

Answer 1

I have created this sandbox project, you can check, things are working fine or correct me if I am missing something to understand your problem
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles(theme => ({
root: {
textAlign: "center",
"&::before": {
content: '"-"'
},
"&::after": {
content: '"-"'
}
}
}));
export default function App(props) {
const classes = useStyles();
return (
<Typography className={classes.root} {...props}>
Hello
</Typography>
);
}
I think you are using the className props in a wrong way, you have to pass the string, not an object.
classes props expect an object, we generally use classes props on the component which have exposed class names to override their inner styles, for example in case of Typography Component you can override root element style like this.
export default function App(props) {
const classes = useStyles();
return (
<Typography classes={{ root: classes.root }} {...props}>
Hello
</Typography>
);
}
so classes and classNames are two different things in Material-UI, but sometimes(when you want to apply the style to root element of component) both provide the same solution.
I have created one more Sandbox project with the second solution