Как изменить цвет фона темы пользовательского интерфейса в точках останова?

Question

У меня есть следующее CSS:

@media screen and (min-width: 0px) and (max-width: 400px) {
    body { background-color: red; }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
    body { background-color: blue; }
}
@media screen and (min-width: 600px) {
    body { background-color: green; }
}

И у меня есть следующая тема пользовательского интерфейса для материала:

export const theme = createMuiTheme({
    palette: {
      background: {
        default: 'red'
      },
    }
});

Я хотел бы заменить жестко CSS с точками останова в теме Material UI, но я не могу понять, как это сделать. Я пробовал следующее (и несколько вариантов), и, похоже, ничего не работает.

const defaultTheme = createMuiTheme();
export const theme = createMuiTheme({
    palette: {
      background: {
        [defaultTheme.breakpoints.down('sm')]: {
            default: 'red'
        }
      },
    }
});

Это не поддерживается пользовательским интерфейсом материала?

Answer 1

Здесь вы можете увидеть , как используется theme.palette.background.default. Синтаксис, который вы попробовали, просто добавит новое свойство к theme.palette.background, на которое Material-UI никогда не будет смотреть.

Что вы можете сделать, это создать несколько пользовательских записей в вашей теме, таких как:

const theme = createMuiTheme({
  palette: {
    background: {
      xs: "red",
      sm: "blue",
      md: "green"
    }
  }
});

и затем используйте это в стилях:

const styles = theme => ({
  "@global": {
    body: {
      [theme.breakpoints.up("md")]: {
        backgroundColor: theme.palette.background.md
      },
      [theme.breakpoints.down("sm")]: {
        backgroundColor: theme.palette.background.sm
      },
      [theme.breakpoints.down("xs")]: {
        backgroundColor: theme.palette.background.xs
      }
    }
  }
});

Слегка связанный вопрос: Использование createMuiTheme для переопределения стилей по умолчанию на div's, p's, body