reactjs - 深色模式下的 TextField Material UI

Question

我有一个使用 Material UI 和 React 的深色模式的基本实现，问题是如何使 TextField 帮助文本、标签、边框根据深色和浅色模式切换而变化。TextField 是:

<TextField helperText='Sample text' label="Title" variant="outlined" />

更新:TextField 必须在浅色模式下具有深色 helperText、标签、边框，在深色模式下具有浅色。有暗、亮模式的基本实现:

import { createTheme, ThemeProvider } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import Switch from '@material-ui/core/Switch'

function App() {

  const [dark, setDark] = useState(false)

  const theme = createTheme({
      palette: {
          type: dark ? 'dark' : 'light',
      },
  })

  return (
    <Router>
      <ThemeProvider theme={theme}>
          <Paper>
            <Header></Header>
<Switch checked={dark} onChange={() => setDark(!dark)} />
            <main className='py-3'>
              <Container>
                <Routes>
                  <Route exact path="/" element={<HomeScreen />}></Route>
             ...
                </Routes>
              </Container>
            </main>
            <Footer></Footer>

          </Paper>
      </ThemeProvider>
    </Router>
  );

}

export default App;

一些元素对应于浅色、深色模式切换，TextField 不是。

Answer 1

你可以这样做，正如这里的回答Theme dark turns textfield to white我添加了帮助文本:

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" 
        helperText='Sample text' 
        label="Name" 
        variant="filled"
       />
    </ThemeProvider>
  );
}