MUI5.0 中的 TextField 未转为深色模式

Question

我想将 MUI 转为深色模式，但即使在使用了 ThemeProvider 和 CSSBaseline 以及许多解决方案之后，我也不知道如何将其转为深色模式！

我尝试了下面的代码并阅读了很多关于这个主题的问答，但我无法调试它

检查收到的输出的屏幕截图

import React from 'react';
import { Box, CssBaseline, TextField, Typography } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const darkTheme = createTheme({
  palette: {
    type: 'dark',
    primary: {
      main: '#8985f2',
    },
    secondary: {
      main: '#ff4843',
    },
  },
  typography: {
    fontFamily: 'Poppins',
  },
});

const SignupScreen = () => {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline /> ...
          ...
          ...
          ...
          ...
          <TextField
            id="outlined-basic"
            label="Outlined"
            variant="outlined"
            fullWidth
            color="primary"
          />
        </Box>
      </Box>
    </ThemeProvider>
  );
};

export default SignupScreen;

Answer 1

不确定您使用的是哪个版本的 MUI 对于版本 ^5.4.3 ，但尝试将 'type' 更改为 'mode'.

    const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#8985f2',
    },
    secondary: {
      main: '#ff4843',
    },
  },
  typography: {
    fontFamily: 'Poppins',
  },
});

MUI5.0 中的 TextField 未转为深色模式

TextField not turning to dark mode in MUI5.0

javascript

css

reactjs

material-ui