React JS: Apply Material-UI CssBaseline

Question

I want to give my new React app a consistent look and feel using Material-UI . Also, I want the styles and such to be easily maintainable. So the default theme seems like a pretty good start. The cssBaseline offered by Material-UI seems to check all the boxes, so I want to give it a try. The thing is, surprise, it's not working. Css themes aren't really my thing. Am I misguided here or what? The following code is what I've implemented in my App.js component with no luck (taken from here ). I'm hoping is just an implmentation detail.

import React from "react";
import Footer from "./Footer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AddTodo from "../containers/AddTodo";
import VisibleTodoList from "../containers/VisibleTodoList";

const App = () => (
  <React.Fragment>
    <CssBaseline />
    <div>
      <AddTodo />
      <VisibleTodoList />
      <Footer />
    </div>
  </React.Fragment>
);

export default App;

EDIT : This is the index.js located in the root of the project:

    import React from "react";
    import { render } from "react-dom";
    import { createStore, applyMiddleware } from "redux";
    import { Provider } from "react-redux";
    import App from "./components/App";
    import rootReducer from "./reducers";

    const store = createStore(rootReducer);

   render(
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
          <React.Fragment>
            <CssBaseline />
            <App />
          </React.Fragment>
        </MuiThemeProvider>
      </Provider>,
      document.getElementById("root")
    );

EDIT: My new App.js

import React from "react";
import Footer from "./Footer";
import AddTodo from "../containers/AddTodo";
import AppBar from "../components/AppBar";
import VisibleTodoList from "../containers/VisibleTodoList";

const App = () => (
  <div>
    <AppBar />
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
);
export default App;

Answer 1

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