时间戳

首页 > 解决方案 > 将渐变应用到 Material UI 的主题背景

reactjs - 将渐变应用到 Material UI 的主题背景

问题描述

我正在尝试将 MuiTheme 的默认背景颜色设置为渐变，我有以下代码：

export const theme = createMuiTheme({
  palette: {
    type: "dark",
    background: {
      default: "linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%)",
    },
  },
})

但是我注意到 material-ui 将其设置为background-color并且不允许使用渐变。
有没有办法绕过这个并让它变成background呢？

标签： reactjsmaterial-ui

解决方案

默认主题背景实际上是由CssBaseline组件应用的。overrides您可以使用对象中的属性覆盖它使用的全局默认样式theme。

export const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
         body: {
           background: 'linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%)',
           backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
        },
      },
    },
  },
  palette: {
    type: "dark",
  },
})

CSS基线

全局 CSS

推荐阅读