So, I've read https://material-ui.com/style/typography/ and I'm loading the Roboto font. I would expect a simple component like:
const theme = createMuiTheme();
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<p>Hello world!</p>
</MuiThemeProvider>
);
};
would style the p tag using Roboto (the default font). But that doesn't happen. If I change the code to:
const theme = createMuiTheme();
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Typography>Hello world!</Typography>
</MuiThemeProvider>
);
};
it works as expected. A p tag is inserted as well as the typography css. I'm confused by how the library is intended to be used:
- Is the idea of Material-UI that I'm going to replace all regular html tags with custom React elements?
- Is there any way to apply the styles from the theme typography to regular html tags like h1-6, p, etc easily?
- Am I expected to style all the regular html elements myself using withStyles on some top level component?
from How do I get typography theme defaults to apply to regular tags with Material-UI?
No comments:
Post a Comment