Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here
const customStyles = theme => ({
root: {
...theme.typography.button,
backgroundColor: theme.palette.common.white,
padding: theme.spacing.unit,
">span": {
background: "red"
}
}
});
function TypographyTheme(props) {
return (
<div className={props.classes.root}>
<h1>
<span>{"The text within this div resembles that of a button."}</span>
</h1>
</div>
);
}