Feel free to check out this sandbox project that I have created. Everything seems to be functioning correctly, but please let me know if there is anything I may have overlooked in understanding your issue.
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>
);
}
If you are using the className props incorrectly, make sure to pass a string rather than an object.
The classes props expect an object, typically used on components with exposed class names for overriding inner styles. For instance, in the case of Typography Component, you can override the root element style like so.
export default function App(props) {
const classes = useStyles();
return (
<Typography classes={{ root: classes.root }} {...props}>
Hello
</Typography>
);
}
Remember, classes and classNames serve different purposes in Material-UI, although sometimes they both offer the same solution (particularly when styling the root element of a component).
I've also put together another Sandbox project demonstrating the second solution.