I've been struggling to turn a MUI <TextField /> to dark mode. Despite trying various solutions such as using ThemeProvider and CSSBaseline, I haven't been able to achieve the desired result!
I have attempted the code below and researched multiple questions and answers on this issue but debugging it has proven to be challenging
For a visual representation of the output received, refer to the screenshot provided
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;