Search code examples
reactjsstyled-components

styled(Component) not passing style values down to custom components

I have a React Component Knob and want to pass different styles to it, to place it multiple times in a CSS grid. The parent component has Display: grid and the children are styled like this:

const Treble = styled(Knob)`
    grid-column: 2;
    grid-row: 1;
`;

const Mid = styled(Knob)`
    grid-column: 2;
    grid-row: 2;
`;
...

But unfortunately the grid values are not being passed down to the Knob component. If I place the grid values on the top most Container of the Knob Component (which is styled by styled-components as well), it does work as expected. Can anybody tell me, what I am doing wrong here?

Solution

  • Ok i just read the docu again and figured out, that you have to pass the classname down to the parent component of the child components. So I changed the render() of the Knob into:

    const {className} = this.props;
<Container className={className}>
   ...
</Container>