主题深色将文本字段变为白色

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

Run Code Online (Sandbox Code Playgroud)

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

谢谢

Answer 1

Rya*_*ell 6

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

您可以根据主题添加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>
  );
}

Run Code Online (Sandbox Code Playgroud)

或者您可以包装TextFieldusingPaper或其他一些控制背景的 Material-UI 组件：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，8 月前
查看次数：	5799 次
最近记录：	6 年，8 月前