title: React JS: Apply Material-UI CssBaseline
body: <p>I want to give my new <code>React</code> app a consistent look and feel using <code>Material-UI</code>.  Also, I want the styles and such to be easily maintainable.  So the default theme seems like a pretty good start.  The <code>cssBaseline</code> offered by <code>Material-UI</code> 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 <a href="https://material-ui.com/style/css-baseline/" rel="noreferrer">here</a> ).  I'm hoping is just an implmentation detail.</p>
  
  <pre><code>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 = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;CssBaseline /&gt;
      &lt;div&gt;
        &lt;AddTodo /&gt;
        &lt;VisibleTodoList /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/React.Fragment&gt;
  );
  
  export default App;
  </code></pre>
  
  <p><strong>EDIT</strong>: This is the <code>index.js</code> located in the root of the project:</p>
  
  <pre><code>    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(
        &lt;Provider store={store}&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
            &lt;React.Fragment&gt;
              &lt;CssBaseline /&gt;
              &lt;App /&gt;
            &lt;/React.Fragment&gt;
          &lt;/MuiThemeProvider&gt;
        &lt;/Provider&gt;,
        document.getElementById("root")
      );
  </code></pre>
  
  <p><strong>EDIT:</strong>  My new App.js</p>
  
  <pre><code>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 = () =&gt; (
    &lt;div&gt;
      &lt;AppBar /&gt;
      &lt;AddTodo /&gt;
      &lt;VisibleTodoList /&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  );
  export default App;
  </code></pre>