Как использовать API-интерфейс material-ui, как установить фоновое изображение в теле?

Question

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

Answer 1

Вы можете внедрить 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);