React Js: Apply Material-Ui CSSbaseline

React JS: Apply Material-UI CssBaseline

The CSSBaseline component should be used inside a Material UI ThemeProvider component.
In your example you did not include a ThemeProvider so there is no Material UI theme.

See official documentation for how to setup ThemeProvider : https://material-ui.com/customization/themes/#muithemeprovider

Based on this sample, a minimal working example with CSSBaseline would be :

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CssBaseline from "@material-ui/core/CssBaseline";
import Root from './Root';

const theme = createMuiTheme();

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <React.Fragment>
        <CssBaseline />
        <Root />
      </React.Fragment>
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector('#app'));

To get the Roboto font loaded, add this to your html template

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

For a more complete sample, look at the source code of this official sample : https://github.com/mui-org/material-ui/tree/master/examples/create-react-app/src

• public/index.html : loading of roboto font
• src/withRoot.js : ThemeProvider and CSSBaseline setup
• src/pages/index.js : sample components with MUI theme applied

Unable to use CssBaseline

createMuiTheme is not existing in material-ui/styles/MuiThemeProvider module

It exists in core module. So you should import it like this.

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

refs: https://material-ui.com/customization/themes/

React: CssBaseLine component doesn't update after Material UI theme changed

This is probably the work of <React.StrictMode>. Take those tags out and it should work. You can track this issue: https://github.com/mui-org/material-ui/issues/20708 for the bug and its possible resolution.

Note that this answer was written on MUI latest release v4.11.0

Material UI's CSSBaseline breaking react-mentions

Your problem here is the line-height property set by the MuiBaseline; To solve, simply reset it to 1, as:

* {
  line-height: 1;
}

Working solution: https://codesandbox.io/s/nifty-glitter-4j0c5?file=/src/styles.css

---

Related Topics