using styled components override the styles of other component
I had dialog
and I m using in other component const ResponseDialog = styled(Dialog)`
, so i want the ResponseDialog to override the before and after.
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.
