MUI v4中PropFunc自定义禁用输入框样式失效问题求助

问题根源 #

你遇到的问题核心在于MUI v4 makeStyles对**动态样式函数（PropFunc）**的解析限制：

• 当你在样式规则中使用函数（比如&:disabled的值是一个函数）时，该函数返回的对象只能包含纯CSS属性，不能嵌套伪类/伪元素选择器（比如&::placeholder）。MUI无法解析这种动态返回的嵌套选择器，导致样式无法正确生成。
• 第二种写法中，你通过展开包含&::placeholder的对象，会导致生成错误的CSS选择器：&::placeholder会被解析为.input:disabled &::placeholder，等价于.input:disabled .input::placeholder，根本匹配不到input自身的placeholder伪元素。

解决方案 #

把嵌套的伪元素选择器从动态函数中抽离，作为独立的样式规则，和&:disabled同级，各自使用PropFunc返回纯属性值；或者如果要保留函数拆分逻辑，确保每个函数只返回纯属性，不包含嵌套选择器。

修正后的代码示例1（拆分独立规则）

const useStyles = makeStyles((theme) => {
  return {
    input: {
      // 处理disabled状态的基础样式
      '&:disabled': ({ locked }: InputStyleProps) => ({
        backgroundColor: !locked ? 'transparent' : getLockedBackgroundColor(theme),
        borderColor: locked && theme.palette.type === ThemeType.DARK 
          ? getDisabledLockedBorderColor(theme) 
          : undefined,
      }),
      // 单独处理disabled状态下的placeholder样式
      '&:disabled::placeholder': ({ locked }: InputStyleProps) => ({
        color: getDisabledPlaceholderColor(theme, locked),
      }),
    },
  };
});

修正后的代码示例2（保留函数拆分逻辑）

如果想保留函数拆分的可读性，可以把每个属性的计算逻辑拆成单独的小函数，避免返回嵌套选择器：

const useStyles = makeStyles((theme) => {
  // 拆分单个属性的计算逻辑
  const getDisabledBg = (locked: InputStyleProps['locked']) => 
    !locked ? 'transparent' : getLockedBackgroundColor(theme);
  
  const getDisabledBorder = (locked: InputStyleProps['locked']) => 
    locked && theme.palette.type === ThemeType.DARK 
      ? getDisabledLockedBorderColor(theme) 
      : undefined;
  
  const getDisabledPlaceholderColor = (locked: InputStyleProps['locked']) => 
    getDisabledPlaceholderColor(theme, locked);

  return {
    input: {
      '&:disabled': ({ locked }) => ({
        backgroundColor: getDisabledBg(locked),
        borderColor: getDisabledBorder(locked),
      }),
      '&:disabled::placeholder': ({ locked }) => ({
        color: getDisabledPlaceholderColor(locked),
      }),
    },
  };
});

为什么第一种简单写法生效？ #

因为你直接返回的是{color: 'red'}这种纯属性对象，没有嵌套任何选择器，MUI可以正确解析这个动态返回的属性值，所以样式正常生效。

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