Search code examples
reactjsstyled-components

React, Styled-component: Override child component style

I would like to override Button component style but it doesn't work. Could you tell me how to override it or should I give all style to the child button component?

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" />;
};
Solution

  • your class is created but not applied. You need to pass it on.

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

    It was answered here: https://stackoverflow.com/a/54113434/12959556

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