using styled components override the styles of other component

I had dialog

export const Dialog : React.FunctionComponent<Props> = (props) => {
    return (
        <DialogContainer>
          <h1>{props.title}</h1>
          <div className="content">{props.children} </div>
          <Divider />
          <div className="footer"> {props.footer} </div>
        </DialogContainer>
    )
}

and DialogContainer contains

&:before,
        &:after {
            content: "";
            height: 0;
            width: 0;
        }
        &:before {
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 19px solid ${theme.filter.border};
            position: absolute;
            top: -18px;
            right: -1px;
        }
        &:after {
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 17px solid ${theme.filter.background};
            position: absolute;
            top: -17px;
            left: 1px;
        }

and I m using in other component const ResponseDialog = styled(Dialog)` , so i want the ResponseDialog to override the before and after.

1 Reply

angell1389•4mo ago

I found the answer to this

Gaming

Programming

using styled components override the styles of other component