In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with:
//other file
const BaseComponentWrapper = styled.div`
margin: 10px;
`
export const BaseComponent = () => {
return (
<BaseComponentWrapper>
Some other content in between
</BaseComponentWrapper>
)
}
import { BaseComponent } from 'otherfile'
const ModifiedBaseComponent = styled(BaseComponent)`
margin: 0px;
`
The margin remains unchanged at 10px for my ModifiedBaseComponent.
The only method that has worked for me to adjust the margin is by manually finding the class generated by styled components in the browser and inserting it into the wrapper CSS code like so:
const BaseComponentWrapper {
.etbykw {
margin: 0px;
}
}
As far as I know, the following code should function as intended but it also does not work:
const BaseComponentWrapper {
> ${ModifiedBaseComponent} {
margin: 0px;
}
}
I have come across suggestions about using a className prop, yet I am struggling to grasp its concept fully. It seems to be related to a specificity issue causing problems that are hard to decipher for someone looking at the code from the outside.