material-ui Popper背景颜色不尊重自定义主题

jexiocij 于 6个月前发布在其他

关注(0)|答案(6)|浏览(42)

重复问题

我已经搜索了现有的问题

重现问题的步骤 🕹

链接到实时示例：
https://github.com/cq-overlays/dashboard (我在 overrides.css 中有解决方法)
步骤：

创建自定义主题并用自己的色调覆盖"grey"颜色

export const theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      light: "#008585",
      main: "#00BEBE",
      dark: "#33cbcb",
      contrastText: "#fff",
    },
    secondary: {
      light: "#ab003c",
      main: "#f50057",
      dark: "#f73378",
      contrastText: "#fff",
    },
    grey: {
      50: "#626E84",
      100: "#232c3d",
      200: "#263042",
      300: "#293346",
      400: "#2c374b",
      500: "#2f3a4f",
      600: "#38445a",
      700: "#414d64",
      800: "#4a566e",
      900: "#525f78",
      A700: "#626E84",
      A400: "#707B8F",
      A200: "#7D8799",
      A100: "#8992A2",
      main: "#293346",
      dark: "#2c374b",
    },
  },
})

创建一个自动完成组件
选择组件，使弹出窗口出现

当前行为 😯

目前，弹出窗口的背景颜色是默认的 "grey",而不是你在自定义主题中设置的灰色：

我的自定义灰色主题是一个非常蓝色的色调，但正如你所看到的，背景颜色要中性得多。我的主题中的自定义主要颜色被正确地继承了。

预期行为 🤔

这个弹出窗口的背景颜色应该像主要颜色一样从自定义主题中派生出来。

上下文 🔦

我正在尝试创建一个自动完成组件，并且我有自定义主题。
我希望添加的是，这是我第一次在这个仓库上提出问题，所以如果我遗漏了一个步骤，我道歉。
我的第一个假设是弹出窗口一定是在ThemeProvider上下文之外传送的，但是深色模式和主要颜色都被正确地继承了，所以那肯定不是它。

你的环境 🌎

npx @mui/envinfo
系统：
OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
Browser: Firefox
Binaries:
Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
Yarn: Not Found
npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: ^11.10.5 => 11.10.5
@emotion/styled: ^11.10.5 => 11.10.5
@mui/base: 5.0.0-alpha.116
@mui/core-downloads-tracker: 5.11.7
@mui/material: ^5.11.7 => 5.11.7
@mui/private-theming: 5.11.7
@mui/styled-engine: 5.11.0
@mui/system: 5.11.7
@mui/types: 7.2.3
@mui/utils: 5.11.7
@types/react: ^18.0.27 => 18.0.27
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5

material-ui

来源：https://github.com/mui/material-ui/issues/36089

6条答案

按热度按时间

ndh0cuux1#

@LeptoFlare,AutoComplete组件在选项列表下方使用了Paper。根据你想要实现的功能，我认为你可以选择以下其中一个选项：

1) 本地：更新选定的AutoComplete中的论文

<Autocomplete
  componentsProps={{
    paper: { sx: { bgcolor: "grey.500" } }, // or static color like "#293346"
  }}
/>

2) 全局：更新整个UI中的AutoComplete中的论文

export const theme = createTheme({
  // [...]
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        paper: {
          backgroundColor: "#293346",
        },
      },
    },
  },
})

3) 全局：更新整个UI中的论文背景颜色

export const theme = createTheme({
  palette: {
    mode: "dark",
    // [...]
    background: {
        paper: "#293346"
    }
  },
})

考虑到你想让这个主题成为全局的，我认为第二个或第三个(全局)选项会更适合你。然而，background.paper会影响到更多的组件，所以它不太安全。

赞(0）回复(0）举报 6个月前

20jt8wwn2#

感谢您的回复！然而，我已经在使用一个(不太优雅)的解决方法，只是想看到这个问题得到修复。

赞(0）回复(0）举报 6个月前

ogsagwnx3#

遗憾的是，我不认为这可能在MUI方面进行更改。
默认调色板使用的是 static colors (即 background.paper 是 #121212 ),而不是动态主题颜色(如 palette.gray )。
这种更改可能会带来更多问题，最重要的是：

依赖于这种行为的所有项目(即使不知道这一点),在更新后可能会看起来不同
Emotion 将不会很好地优化这些动态颜色，因此动态颜色会使MUI变慢

赞(0）回复(0）举报 6个月前

kyks70gy4#

实际上，Paper背景并没有使用grey调色板的颜色。@mnajdova,@siriwatknp,@danilo-leal,你们知道为什么这样做吗？
感谢分析这个问题，@rangoo94。你的建议是有效的。@LeptoFlare如果你想让你应用程序中的所有弹出窗口都有自定义背景，我建议你选择选项3。

赞(0）回复(0）举报 6个月前

njthzxwz5#

明白了！感谢解释。

赞(0）回复(0）举报 6个月前

t3irkdon6#

@michaldudak,从历史上看，有一种使用 grey 调色板的想法，但它会影响太多组件( #10015 )。这是一个有效的观点，无论是对于 MUI 内部还是外部库。
把这个放在一边，我认为当前的解决方案是有意义的：