Question

当我尝试使用深色主题时，它将文本字段变为白色而不是灰色背景。我做错什么了吗？

1。创建一个文本字段

2。将主题设置为深色

import React from "react";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

export default function FilledTextFields() {
  return (
    <ThemeProvider theme={theme}>
      <TextField id="myfilled-name" label="Name" variant="filled" />
    </ThemeProvider>
  );
}

https://codesandbox.io/embed/material-demo-18s9j

谢谢

Answer 1

您需要添加一些东西来控制背景。

您可以添加CssBaseline来基于主题设置<body>背景：

import React from "react";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

export default function FilledTextFields() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <TextField id="myfilled-name" label="Name" variant="filled" />
    </ThemeProvider>
  );
}

或者您可以使用TextField或其他控制背景的Material-UI组件包装Paper：

import React from "react";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import Paper from "@material-ui/core/Paper";

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

export default function FilledTextFields() {
  return (
    <ThemeProvider theme={theme}>
      <Paper style={{ height: 100 }}>
        <TextField id="myfilled-name" label="Name" variant="filled" />
      </Paper>
    </ThemeProvider>
  );
}

主题黑暗将文本字段变为白色

1 个答案: