Material UI 深色模式主按钮在应用栏上不可见

Question

我正在尝试将 material-ui 的暗模式用于 React 应用程序。我浏览了文档并设法激活了它，但我遇到了一个问题：在其上使用基本的 AppBar 和主按钮时，主按钮是 "invisible" - 我猜它与 AppBar 背景的颜色相同。

这是正常行为还是我做错了什么？

这是一个带有 quick 示例的沙箱：

https://codesandbox.io/s/material-demo-8o3kx

谢谢！

Answer 1

下面的代码可以从 Material-UI 设置默认的深色主题，尽管看起来 <AppBar> 组件没有适配默认的 material-UI深色主题：文本原色与AppBar的背景颜色相同，所以你注意到你看不到按钮。

import React from "react";
import Typography from "@material-ui/core/Typography";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import {
  useTheme,
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";

function WithTheme() {
  const theme = useTheme();

  return (
    <AppBar position="static">
      <Toolbar>
        <Button color="secondary">Primary</Button>
        <Button color="primary">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

const theme = createMuiTheme({
  palette: {
    type: 'dark', // Switching the dark mode on is a single property value change.
  }
});

export default function DarkTheme() {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <WithTheme />
    </MuiThemeProvider>
  );
}

Material UI 深色模式主按钮在应用栏上不可见

Material UI Dark Mode primary button invisible on appbar

appbar

react-native

material-ui