我想给我的新React应用程序一致的外观和使用感觉Material- UI。另外，我希望样式等易于维护。因此，默认主题似乎是一个不错的开始。该cssBaseline所提供的Material- UI似乎要检查所有的盒子，所以我想试一试。令人惊讶的是，这没有用。CSS主题不是我真正的事情。我在这里被误导了吗？以下代码是我在App.js组件中实现的，没有运气（从此处获取）。我希望这只是一个实现细节。

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;

编辑 ：这是index.js位于项目的根目录：

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

编辑： 我新的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;