CODEWITHSUNDEEP
material-uifrontendtailwind-cssreact-tsx
CrayonAzul
CrayonAzul

Reputation: 21

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

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>

Upvotes: 1

Views: 35

Answers (1)

CrayonAzul
CrayonAzul

Reputation: 21

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'
                        }                            
                    }}                            
                />

Upvotes: 1

Related Questions