React JS：應用Material-UI CssBaseline

Question

我想使用Material-UI為我的新React應用程序提供一致的外觀和感覺。 此外，我希望樣式等易於維護。 所以默認主題似乎是一個非常好的開始。 Material-UI提供的cssBaseline似乎檢查了所有的框，所以我想嘗試一下。 令人驚訝的是，它不起作用。 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;

Answer 1

CSSBaseline組件應該在Material UI ThemeProvider組件中使用。 在您的示例中，您沒有包含ThemeProvider，因此沒有Material UI主題。

有關如何設置ThemeProvider的信息，請參閱官方文檔： 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

• public / index.html：加載roboto字體
• src / withRoot.js：ThemeProvider和CSSBaseline設置
• src / pages / index.js：應用了MUI主題的示例組件