Как использовать API-интерфейс material-ui, как установить фоновое изображение в теле? - PullRequest
0 голосов
/ 25 июня 2018

Я хочу установить фоновое изображение в теле моего веб-приложения, используя CSS-in-JS для материала-ui-next, withStyles или темы? Я хотел бы избежать использования внешнего файла CSS, если это возможно.

1 Ответ

0 голосов
/ 10 октября 2018

Вы можете внедрить css во внешнюю область видимости с помощью "@global", используя withStyles из "@ material-ui / core / styles"

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);
...