After reading the documentation on https://material-ui.com/style/typography/ and loading the Roboto font, I expected a simple component like this:
const theme = createMuiTheme();
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<p>Hello world!</p>
</MuiThemeProvider>
);
};
to style the p tag using Roboto as the default font. However, that was not the case. When I modified the code to this:
const theme = createMuiTheme();
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Typography>Hello world!</Typography>
</MuiThemeProvider>
);
};
it worked as expected with the typography being applied. This left me questioning how the library should be used:
- Do I need to replace all regular HTML tags with custom React elements when using Material-UI?
- Is there a simple way to apply theme typography styles to standard HTML tags like h1-h6, p, etc?
- Am I required to manually style all the standard HTML elements myself by using withStyles on a top-level component?