我想使用 Material-UI
为我的新 React
应用程序提供一致的外观和感觉。此外,我希望样式等易于维护。所以默认主题似乎是一个很好的开始。 Material-UI
提供的cssBaseline
似乎可以勾选所有的框,所以我想试一试。问题是,令人惊讶的是,它不起作用。 Css 主题不是我的菜。我在这里被误导了还是什么?以下代码是我在我的 App.js 组件中实现的,但没有成功(取自 here )。我希望这只是一个实现细节。
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;
最佳答案
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 主题的示例组件
关于css - react JS : Apply Material-UI CssBaseline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51658793/