如何用TailwindCSS修改Material UI中TextField组件的文字颜色？

你的问题出在Material UI组件的样式优先级上：TextField内部的标签、输入框元素自带MUI的CSS-in-JS样式，优先级比父容器的Tailwind文本颜色类更高，所以父级的dark:text-slate-100只能影响普通文本（比如Example 1），无法覆盖TextField内部元素的颜色。

下面是几种直接用TailwindCSS实现需求的方案：

方案1：给TextField的内部组件单独加Tailwind类 #

直接通过TextField的InputProps和InputLabelProps属性，给输入框和标签添加Tailwind颜色类，精准控制：

<TextField
  margin="normal"
  required
  fullWidth
  id="email"
  label="Email"
  name="correo"
  autoComplete="email"
  autoFocus
  error={!!correoError}
  helperText={correoError}
  // 设置输入文字颜色
  InputProps={{ className: "dark:text-slate-100" }}
  // 设置标签颜色，同时保留聚焦/错误状态的默认样式
  InputLabelProps={{ className: "dark:text-slate-100 dark:focus:text-slate-100" }}
/>

<TextField
  margin="normal"
  required
  fullWidth
  name="contrasena"
  label="Contraseña"
  type="password"
  id="password"
  autoComplete="current-password"
  InputProps={{ className: "dark:text-slate-100" }}
  InputLabelProps={{ className: "dark:text-slate-100 dark:focus:text-slate-100" }}
/>

方案2：用MUI的sx属性结合Tailwind颜色变量 #

通过MUI的sx属性，直接引用Tailwind的颜色主题变量，一次性覆盖TextField的相关样式，适合需要统一控制多个状态的场景：

<TextField
  margin="normal"
  required
  fullWidth
  id="email"
  label="Email"
  name="correo"
  autoComplete="email"
  autoFocus
  error={!!correoError}
  helperText={correoError}
  sx={{
    // 默认标签颜色
    '& .MuiInputLabel-root': { color: 'theme(colors.slate.100)' },
    // 默认输入文字颜色
    '& .MuiInputBase-input': { color: 'theme(colors.slate.100)' },
    // 错误状态下保留标签的错误色，输入文字仍用白色
    '&.Mui-error .MuiInputLabel-root': { color: 'theme(colors.error.main)' },
    // 聚焦状态下标签保持白色
    '& .MuiInputLabel-root.Mui-focused': { color: 'theme(colors.slate.100)' },
  }}
/>

方案3：全局自定义类（适合多个TextField复用） #

如果你的项目中有多个TextField需要相同的深色模式样式，可以在全局CSS文件（比如globals.css）中定义自定义类，然后给TextField添加该类：

/* globals.css */
.dark .tw-textfield .MuiInputLabel-root {
  @apply text-slate-100;
}
.dark .tw-textfield .MuiInputBase-input {
  @apply text-slate-100;
}
/* 错误状态下保留标签的红色 */
.dark .tw-textfield.Mui-error .MuiInputLabel-root {
  @apply text-red-500;
}
/* 聚焦状态标签保持白色 */
.dark .tw-textfield .MuiInputLabel-root.Mui-focused {
  @apply text-slate-100;
}

然后在TextField中使用：

<TextField
  // ...其他props
  className="tw-textfield"
/>

内容的提问来源于stack exchange，提问作者CrayonAzul