React，Styled-component：覆盖子组件样式答案

【问题标题】：React, Styled-component: Override child component styleReact，Styled-component：覆盖子组件样式
【发布时间】：2020-06-09 22:43:27
【问题描述】：

我想覆盖 Button 组件样式，但它不起作用。你能告诉我如何覆盖它还是应该将所有样式都赋予子按钮组件？

Button.js

const StyledButton = styled.button`
  color: white;
  background-color: yellow;
`;

const Button = ({text}) => {
  return <StyledButton>{text}</StyledButton>;
};

export default Button;

父.js

import Button from "./Button";

const OverrideButton = styled(Button)`
  && {
    color: blue;
    background-color: green;
  }
`;

const Parent = () => {
  return <OverrideButton text="Parent" />;
};

【问题讨论】：

尝试在父组件中为 css 保留 !important

标签： reactjs styled-components

【解决方案1】：

您的课程已创建但未应用。你需要传递它。

const Button = ({text, className}) => {
  return <StyledButton className={className}>{text}</StyledButton>;
};

这里回答了：https://stackoverflow.com/a/54113434/12959556

示例：https://stackblitz.com/edit/react-a5mdpo?embed=1&file=index.js

【讨论】：