Theme dark turns textfield to white

问题

when I try to use the dark theme, it turns the text field to white instead of a gray background. Am I doing something wrong ?

1.Create a text field

2.Set the theme to dark

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

Thanks

回答1:

You need to add something to control the background.

You can add CssBaseline to set the <body> background based on the theme:

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

Or you could wrap the TextField using Paper or some other Material-UI component that controls the background:

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

来源：https://stackoverflow.com/questions/58343863/theme-dark-turns-textfield-to-white

标签

reactjs

material-ui