I'm currently experimenting with custom styling on a MaterialUI Typography component using the code snippet below:
const StyledTitleTypography = styled(Typography)`
color: 'black';
font-weight: 'bold';
`;
<StyledTitleTypography variant="h6" noWrap>
test
</StyledTitleTypography>
As a result, I get the following output: https://i.stack.imgur.com/HZoc3.png
Interestingly, when I apply styling directly within the component, it functions as expected
<Typography variant="h6" noWrap style={{ color: 'black', fontWeight: 'bold' }}>
test
</Typography>
This produces the following output: https://i.stack.imgur.com/YKHzk.png
If anyone is curious about how this works, feel free to check out this demonstration on stackblitz utilizing emotion and styled-components: here