我想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;