After observing that the styled-Component/Wrapper method outlined below can sometimes result in the Child component's CSS being overridden by its parent, I developed a simplified example:
Here is the Parent component and its corresponding Styled-Component Wrapper:
import styled from "styled-components";
const Child = () => {
return (
<ChildWrapper>
<div className="nice-box" />
</ChildWrapper>
);
};
const Parent = () => {
return (
<ParentWrapper>
<div className="nice-box" />
<Child />
</ParentWrapper>
);
};
const ChildWrapper = styled.div`
.nice-box {
border: 3px solid green;
height: 100px;
width: 100px;
}
`;
const ParentWrapper = styled.div`
.nice-box {
border: 3px solid black;
height: 50px;
width: 50px;
}
`;
export default Parent;
However, it was discovered that if the "ChildWrapper" is placed after "ParentWrapper", the child component will have its own unique style!
So, the question arises - how can we prevent the parent's style from affecting the child?