Как настроить цвет фона для «бумаги» на материал-интерфейс? - PullRequest
Новая
       10

Как настроить цвет фона для «бумаги» на материал-интерфейс?

0 голосов
/ 04 марта 2020

Я изучаю стилизацию material-ui и использую один из предоставленных бесплатных шаблонов. 

const useStyles = makeStyles(theme => ({
  root: {
    height: "100vh"
  },
  image: {
    backgroundImage: "url(https://source.unsplash.com/random)",
    backgroundRepeat: "no-repeat",
    backgroundColor:
      theme.palette.type === "dark"
        ? theme.palette.grey[900]
        : theme.palette.grey[50],
    backgroundSize: "cover",
    backgroundPosition: "center"
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

Я попытался коснуться каждого аспекта и попытался изменить фон правой стороны шаблона. , Но это похоже на то, что оно просто покрывает форму. Как я могу настроить весь фон пространства и цвет элементов формы?

background

введите описание изображения здесь

1 Ответ

0 голосов
/ 05 марта 2020

Трудно сказать, не видя код компонента и то, как применяются эти стили.

Но в целом вы можете изменить цвет бумаги следующим образом: 

const useStyles = makeStyles(theme => ({
  paperRoot: {
    backgroundColor: 'red'
  }
}));

И затем Либо: 

<Paper className={classes.paperRoot} />

Или 

<Paper classes={{root: classes.paperRoot}}/>

Вот демонстрация codesandbox , показывающая второй вариант.

Соответствующее руководство на mui docs Настройка компонентов .

...