样式组件 (styled-components) |将一个叠加在另一个之上

Question

问题是这样的：
有一个使用 styled-components 创建的 UiInput React 组件，在它上面还有一个 UiInputExt React 组件，它应该覆盖 UiInput 中定义的一些样式，但由于某些原因并没有发生，显然它甚至没有添加相应的class...
我附上下面的代码：

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};
    }
`;

<StyledInput 
    id={id}
    className={cn(styles.input, classes)}
    type={type}
    placeholder={placeholder}
    styles={isTheme.styles}
>
</StyledInput>

以及相应的覆盖（不起作用！）

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>

Answer 1

您没有导出带样式的组件 StyledInput，而是导出正在渲染的普通 React 组件 StyledInput。

const StyledInput = styled.input`
  color: blue;
`;

const UiInput = () => {
  return <StyledInput />;
};

export default UiInput;

UiInputExt

import UiInput from "./UiInput";

const StyledInputExt = styled(UiInput)`
  color: green;
`;

const UiInputExt = () => {
  return <StyledInputExt />;
};

您应用于 UiInput 的样式未应用于它呈现的 JSX，即它未传递给 StyledInput。

您只能覆盖其他样式组件。为此你应该直接 export/import StyledInput (重命名为 UiInput)。

const UiInput = styled.input`
  color: blue;
`;

export default UiInput;

另一种方法是将 UiInput 导出为带样式的组件，并确保 className 属性传递给 StyledInput 组件。

const StyledInput = styled.input`
  color: blue;
`;

const UiInput = ({ className }) => {
  return <StyledInput className={className} />;
};

export default styled(UiInput)``;

样式组件 (styled-components) |将一个叠加在另一个之上

Styling Components (styled-components) | Superimposing one on top of the other

reactjs

styled-components