材质 ui AppBar 文本颜色更改为白色/返回功能

Question

Material ui AppBar 如何根据 AppBar 颜色是深色还是浅色将文本颜色更改为白色/黑色 有没有我可以从材料 ui 中使用的功能？我检查了他们的文档，我自己找不到功能 我试过css

<style>
.container {
  background-color: #ff0001;
  padding: 15px;
}

.container p {
  mix-blend-mode: difference;
  color: white
}
</style>



<div class="container">
  <p> asd </p>
</div>

但它不只给出白色/黑色

Answer 1

Material UI 内置支持在明暗模式之间轻松切换。您需要做的就是为这两种模式构建主题对象，用ThemeProvider 包装您的代码，并使用状态（和上下文）在明暗模式之间切换。参考链接：

1. ThemeProvider
2. Theme object。在这里，您可以根据自己的方便将palette.type 属性设置为light 或dark。

更正：

Material-UI 使用palette.primary/secondary 中的main 颜色作为输入，以获得理想的对比文本颜色。这适用于所有 MUI 组件（如 AppBar）。确切的源代码在here 中可用，在getContrastText 函数中。他们还在代码中链接了使用 scss 实现相同目的的源。

我没有完全理解这个实现背后的逻辑，但我希望链接的代码能回答你的问题。

编辑 2：

getContrastText 可以通过以下方式与theme 对象一起使用：

const useStyles = makeStyles(theme => ({
  "key": {
    "color": theme.palette.getContrastText("#cfe8fc") // returns rgba(0,0,0,0.87)
  }
})

这个theme 对象也可以使用useTheme 钩子或withStyles HOC 获得。