Thursday, 18 October 2018

How do I get typography theme defaults to apply to regular tags with Material-UI?

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:

  1. Is the idea of Material-UI that I'm going to replace all regular html tags with custom React elements?
  2. Is there any way to apply the styles from the theme typography to regular html tags like h1-6, p, etc easily?
  3. 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