Вам нужно добавить что-то для управления фоном.
Вы можете добавить 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, используя Paper или другой компонент 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>
);
}