I am new to styled-components
. I'm trying to set styles for MyComponent
to apply to styled-component
.
export const Relative = styled.div`
position: relative;
`
export const Container = ({ children }) => {
return <Relative>
<AnotherComponent/>
{children}
</Relative>
}
export const MyComponent = () => <Container>/* */</Container>
How can I use styled-components
to style a Container
inside MyComponent
without editing MyComponent?
When you're using styled(YourComponent)
, assuming YourComponent is a normal Component and not already a styled-component, this will automatically provide the className
property to the component. You simple need to put that somewhere.
export const Relative = styled.div`
position: relative;
`
export const Container = ({ children }) => {
return (
<Relative>
<AnotherComponent/>
{children}
</Relative>
)
}
export const MyComponent = ({ className, children }) => {
return (
<div className={className}>
<Container>
{children}
</Container>
</div>
)
}
export const CustomMyComponent = styled(MyComponent)`
// Styles inside here will be applied to the root element of MyComponent
`;