Theme dark turns textfield to white

Question

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

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-10-11T15:09:47

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

Theme dark turns textfield to white

1 Answers