如何在断点处更改 Material UI 的主题背景颜色？

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; }
}

我有以下 Material UI 主题：

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

我想用 Material UI 主题中的断点替换硬编码的 CSS，但我不知道该怎么做。 我已经尝试了以下方法（以及几种变体），但似乎没有任何效果。

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

Material UI 不支持这个吗？

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

稍微相关的问题：Using createMuiTheme to override default styles on div's, p's, body

Answer 2

找到了建议的稍微简单的解决方案这里

<Box sx={{ backgroundColor : { sx:'primary.main', md:'secondary:main'}, }}>
  // Children come here
</Box>