[英]How to style body element in materialUI
我找不到任何方法来使用 Material-UI 的ThemeProvider
定位根元素。
const theme = createMuiTheme({
palette: {
background: {
default: "#00000",
backgroundColor : 'black',
backgroundImage: 'url(/bg.jpg)',
backgroundPosition: 'center',
height:'100%'
},
primary: {
light: '#757ce8',
main: '#fff',
dark: '#002884',
contrastText: 'grey',
},
},
});
您可以使用@global class
将样式应用于body
如下所示:
const useGlobalStyles = makeStyles({
"@global": {
body: {
backgroundColor: "tomato"
}
}
});
const theme = createMuiTheme({});
function MyThemeProvider({ children }) {
useGlobalStyles();
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
function App() {
return (
<MyThemeProvider>
<Button variant="contained" color="primary">
Button
</Button>
</MyThemeProvider>
);
}
如果您通过create-react-app
创建项目,您还可以使用 css/scss 模块来全局设置任何元素的样式:
/* styles.css */
body {
color: white;
font-size: 15px;
}
import React from "react";
import Button from "@material-ui/core/Button";
import "./styles.css";
function App() {
return (
<Button variant="contained" color="primary">
Hello World
</Button>
);
}
文档 > 主题 > 全局部分中概述的另一种方法:
如果您使用
CssBaseline
组件来应用全局重置,它也可用于应用全局样式。
下面是一个例子:
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"@global": {
body: {
backgroundColor: "tomato"
}
}
}
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
</ThemeProvider>
);
}
const { ThemeProvider, createMuiTheme, CssBaseline } = MaterialUI const theme = createMuiTheme({ overrides: { MuiCssBaseline: { "@global": { body: { backgroundColor: "tomato", }, }, }, }, }) const App = () => { return ( <ThemeProvider theme={theme}> <CssBaseline /> <div className="App"> <h1>Hello CodeSandbox</h1> </div> </ThemeProvider> ) } ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script> <div id="root"></div>
使用GlobalStyles
组件:
import * as React from 'react';
import GlobalStyles from '@material-ui/core/GlobalStyles';
export default function App() {
return (
<React.Fragment>
<GlobalStyles styles={{ h1: { color: 'grey' } }} />
<h1>Grey h1 element</h1>
</React.Fragment>
);
}
或者,如果您已经在使用CssBaseline
组件来设置基线样式:
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: `
h1 {
color: grey;
}
`,
},
},
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<h1>Grey h1 element</h1>
</ThemeProvider>
);
}
来自官方文档: 全局 CSS 覆盖
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.