作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 Material-ui-next 的 CSS-in-JS、withStyles 或主题在我的 Web 应用程序主体中设置背景图像?如果可能的话,我想避免使用外部 CSS 文件。
最佳答案
您可以使用“@material-ui/core/styles”中的 withStyles 将 css 通过“@global”注入(inject)到外部范围
import React, { Fragment } from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import { withStyles } from "@material-ui/core/styles";
import Main from "./Main";
const styles = theme => ({
"@global": {
body: {
backgroundImage: "url('/media/landing.jpg')",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
height: "100%"
},
html: {
height: "100%"
},
"#componentWithId": {
height: "100%"
}
}
});
const App = () => {
return (
<Fragment>
<CssBaseline />
<Main />
</Fragment>
);
};
export default withStyles(styles)(App);
关于reactjs - 使用material-ui的API,如何在body中设置背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51014469/
我是一名优秀的程序员,十分优秀!