So, I've read / 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?

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?

• javascript
• html
• css
• reactjs
• material-ui

2 Answers 2

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);

1. Yes, but you don't have to.

2. Yes, using the withStyles component and styles being defined. See example at the end of the answer

3. Components like Paper, Drawer, etc will take the theme defaults which can also be altered in the component that initiated <MuiThemeProvider>. Normal HTML elements need to have a style defined in the component it's being used in, or a classname in a stylesheet.

If you have say style.root, you can apply that to a Material-UI component, a div, span, p, a, etc. If it's applied to a MUI component, the styles in style.root will override the defaults.

Using the Material-UI Paper component as an example and styles.paragraph as an additional example:

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
  paragraph: {
    color: '#FFF',
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
});

These styles can now be applied to any element

<div className={styles.root}>
  <Paper className={styles.root}>
    <Typography component="p" className={styles.paragraph}>
      Paper can be used to build surface or other elements for your application.
    </Typography>
  </Paper>
</div>