材质 UI 暗模式主按钮在应用栏上不可见

Question

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

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

这是一个带有简单示例的沙盒：

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