styled-components扩展UiInput组件样式覆盖失败、样式类未添加问题求助

使用styled()包裹自定义React组件实现样式扩展时，styled-components会自动将生成的扩展样式类通过className属性传递给被包裹的组件。你的UiInput组件没有接收这个className属性，也没有将其合并到最终渲染的input元素的类名列表中，所以扩展样式类不会被挂载到元素上，样式自然不生效。

步骤1：修改UiInput组件逻辑 #

在UiInput的入参中接收className属性，将其合并到input元素的类名列表中：

// UiInput组件内部代码修改示例
const StyledInput = styled.input`
    /* 原有样式保持不变 */
    color: ${(props) => props.styles.color};

    ::placeholder,
    ::-webkit-input-placeholder {
        color: ${(props) => props.styles.color};
    }

    :-moz-placeholder {
        color: ${(props) => props.styles.color};
        opacity: 1;
    }

    ::-moz-placeholder {
        color: ${(props) => props.styles.color};
        opacity: 1;
    }

    :-ms-input-placeholder {
        color: ${(props) => props.styles.color};
    }
`;

const UiInput = ({ id, type, placeholder, classes, className, isTheme }) => {
  return (
    <StyledInput 
      id={id}
      // 把接收到的className加入类名合并列表
      className={cn(styles.input, classes, className)}
      type={type}
      placeholder={placeholder}
      styles={isTheme.styles}
    />
  )
}

步骤2（可选）：提升扩展样式优先级 #

如果修改后扩展样式还是被原有样式覆盖，可以在扩展样式外层加&&提升选择器权重，确保优先级高于原有样式：

import UiInput from '../';

const StyledUiInputExt = styled(UiInput)`
    && {
        color: ${(props) => props.styles.color_uiinputext};

        ::placeholder,
        ::-webkit-input-placeholder {
            color: ${(props) => props.styles.color_uiinputext};
        }

        :-moz-placeholder {
            color: ${(props) => props.styles.color_uiinputext};
            opacity: 1;
        }

        ::-moz-placeholder {
            color: ${(props) => props.styles.color_uiinputext};
            opacity: 1;
        }

        :-ms-input-placeholder {
            color: ${(props) => props.styles.color_uiinputext};
        }
    }
`;

<StyledUiInputExt classes={cn(styles.input, classes)} {...props} styles={isTheme.styles}></StyledUiInputExt>

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