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.
angell138943d ago
I found the answer to this