React, Styled-component: переопределить стиль дочернего компонента

Question

Я бы хотел переопределить стиль компонента Button, но он не работает. Не могли бы вы сказать мне, как переопределить его или я должен придать весь стиль дочернему компоненту кнопки?

Button. js

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

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

export default Button;

Parent. js

import Button from "./Button";

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

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

Answer 1

ваш класс создан, но не применяется. Вам нужно передать его.

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

Здесь ответили: { ссылка }

Пример: https://stackblitz.com/edit/react-a5mdpo?embed=1&file=index.js