React JS：应用 Material-UI CssBaseline

我想给我的新React应用程序具有一致的外观和感觉Material-UI。另外，我希望样式等易于维护。所以默认主题似乎是一个很好的开始。这cssBaseline由...提供Material-UI似乎勾选了所有选项，所以我想尝试一下。令人惊讶的是，问题是它不起作用。 CSS 主题不是我真正喜欢的。我在这里被误导了还是什么？以下代码是我在 App.js 组件中实现的，但没有成功（取自here https://material-ui.com/style/css-baseline/）。我希望这只是一个实施细节。

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: 这是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")
    );

EDIT:我的新 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;

CSSBaseline 组件应该在 Material UI ThemeProvider 组件内使用。 在您的示例中，您没有包含 ThemeProvider，因此没有 Material UI 主题。

有关如何设置 ThemeProvider 的信息，请参阅官方文档：https://material-ui.com/customization/themes/#muithemeprovider https://material-ui.com/customization/themes/#muithemeprovider

基于此示例，CSSBaseline 的最小工作示例如下：

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

要加载 Roboto 字体，请将其添加到您的 html 模板中

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

如需更完整的示例，请查看此官方示例的源代码：https://github.com/mui-org/material-ui/tree/master/examples/create-react-app/src https://github.com/mui-org/material-ui/tree/master/examples/create-react-app/src

• public/index.html：加载roboto字体
• src/withRoot.js ：ThemeProvider 和 CSSBaseline 设置
• src/pages/index.js ：应用了 MUI 主题的示例组件