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

Question

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?

Answer 1

1. Is the idea of Material-UI that I'm going to replace all regular html tags with custom React elements?

No. The idea of typography in Material UI (and Material Design in general) is to provide a consistent scale of variants accross you application theme : https://material.io/design/typography/the-type-system.html#

You may then use this typography styles in different ways, like explained in 2. and 3. below

2. Is there any way to apply the styles from the theme typography to regular html tags like h1-6, p, etc easily?

Like @Chimera.Zen answered, you may apply theme styles and font variants to any react component or html tags with the withStyles HOC. But here is another way of doing so that i find more useful, by reusing theme typography definitions in your JSS styles :

const styles = theme => ({
  paragraph: {
    ...theme.typography.body1
  }
});

const MyComponent = props => (
  <p className={props.classes.paragraph}>
    My styles text
  </p>
);

3. Am I expected to style all the regular html elements myself using withStyles on some top level component?

You are not. You may style individual component if you like, but you will likely more use inheritance and use default styles of container components like Paper, Drawer, etc. or your own container components.

You can implement a global container component (eg "Root" or "App"...) applying default "body1" style to your whole application.

Another approach is to use the 'jss-global' plugin like explained here by MUI author https://github.com/mui-org/material-ui/issues/9988#issuecomment-426631645 :

import { withStyles } from '@material-ui/core/styles';

export default withStyles({
  '@global': {
    body: {
      ...theme.typography.body1
    },
  },
})(() => null);