How do I change the text color of a TextField component from Material UI using TailwindCSS?

Question

I'm trying to change the color of a TextField component from Material UI, both the label and the input text only using TailwindCSS.

Current MaterialUI version: 6.1.2 Current TailwindCSS version 3.4.1 

My last approach was this: Only the Example 1 text was white, but the TextFields still remain the same.

<Box className="dark:bg-slate-600 dark:text-slate-100" sx={{ boxShadow: 3, borderRadius: 2, px: 4, py: 6, marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center",}}> <Typography component="h1" variant="h5"> Example 1 </Typography> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}> <TextField margin="normal" required fullWidth id="email" label="Email" name="correo" autoComplete="email" autoFocus error={!!correoError} helperText={correoError} /> <TextField margin="normal" required fullWidth name="contrasena" label="Contraseña" type="password" id="password" autoComplete="current-password" /> <Box sx={{ width: '100%', height: '1rem' }} /> {authError && ( <Box sx={{ p: 1, bgcolor: 'error.main', color: 'white', textAlign: 'center' }}> {authError} </Box> )} <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }} > Example 2 </Button> </Box> 

Answer 1

I solved this by adding to the TextField Component the propiety slotProps by adding the classes to it like this:

TextField API docs

<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}> <TextField margin="normal" required fullWidth id="email" label="Correo electrónico" name="correo" autoComplete="email" autoFocus onChange={() => { setCorreoError(null); setAuthError(null); setContrasenaError(null); }} error={!!correoError} helperText={correoError} slotProps={{ inputLabel:{ className:'dark:text-slate-100' }, input:{ className:'dark:text-slate-100' } }} />