如何使用 TailwindCSS 从 Material UI 更改 TextField 组件的文本颜色？

Question

我正在尝试仅使用 TailwindCSS 更改 Material UI 中 TextField 组件的颜色，标签和输入文本。

Current MaterialUI version: 6.1.2
Current TailwindCSS version 3.4.1

我最后的方法是这样的： 只有示例 1 的文本是白色的，但文本字段仍然保持不变。

<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

我通过向 TextField 组件添加属性 slotProps 来解决这个问题，方法是向其中添加类，如下所示：

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