Next.js中MUI输入框聚焦时标签颜色无法通过theme.ts修改

问题原因 #

你当前在MuiInputBase的styleOverrides里尝试修改标签样式，但标签（MuiInputLabel）是输入组件的同级元素，并非MuiInputBase的子元素，所以这个选择器无法命中目标元素，导致样式不生效。而底部边框的样式生效是因为它属于MuiInputBase自身的伪元素，层级关系正确。

可行方案 #

直接在主题中针对MuiInputLabel配置styleOverrides，或者结合输入框的变体精准设置：

方案1：全局修改所有输入框标签的聚焦样式 #

在theme.ts中添加MuiInputLabel的配置：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    // 保留你原有的MuiInputBase配置
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: "Manrope",
          color: "#2A2B2F",
          "&.Mui-focused:after": {
            borderBottom: "2px solid #2E98EF",
          },
        },
      },
    },
    // 新增MuiInputLabel的样式配置
    MuiInputLabel: {
      styleOverrides: {
        // 针对标准变体的标签聚焦状态
        standard: {
          "&.Mui-focused": {
            color: "#2E98EF",
          },
        },
        // 若需覆盖其他变体（如outlined/filled），可添加对应配置
        outlined: {
          "&.Mui-focused": {
            color: "#2E98EF",
          },
        },
      },
    },
  },
});

export default theme;

方案2：仅针对标准输入框关联标签样式 #

如果只想修改标准型（standard）输入框的标签，也可以在MuiInput的配置中处理：

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: "Manrope",
          color: "#2A2B2F",
          "&.Mui-focused:after": {
            borderBottom: "2px solid #2E98EF",
          },
        },
      },
    },
    MuiInput: {
      styleOverrides: {
        root: {
          // 选中输入框聚焦时的同级标签元素
          "&.Mui-focused + .MuiInputLabel-root.MuiInputLabel-standard": {
            color: "#2E98EF",
          },
        },
      },
    },
  },
});

验证方式 #

配置完成后重启Next.js应用，打开浏览器开发者工具检查标签元素，应该能看到来自主题的color: #2E98EF样式生效，且优先级足够覆盖默认样式。

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