How to avoid redundant nested divs using Styled Components - css

Question

I have several components used to build layouts. For example, a Row, a Column, and a Vertical Align component:
export const Row = styled.div`
display: flex;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
> * {
margin-left: 10px;
&:last-child {
margin-left: 0;
}
}
`
export const Column = styled.div`
flex: 1;
`
export const VerticalAlign = styled.div`
align-items: center;
display: flex;
`
Using them together produces unnecessary nested divs:
<Row>
<Column>
<VerticalAlign>
<Icon />
<input />
</VerticalAlign>
</Column>
<Column>
<VerticalAlign>
// ...
</VerticalAlign>
</Column>
</Row>
If this were just css, I would do this:
<div class="row">
<div class="column vertical-align">
// ...
</div>
</div>
I could extend classes, but that would create an explosion of one-off components for every combination:
const VerticalAlignColumn = styled(Column)`
align-items: center;
display: flex;
`;
const VerticalAlignRow = styled(Row)`
//...
`;
Is there a way to easily combine the styles of multiple components into a single component? Something like <Row+VerticalAlign>...</Row+VerticalAlign>?

Answer 1

I couldn't find a way to do like you want.
And the best approach here is like you said (created extend classes) or work with props, like this:
export const Column = styled.div`
flex: 1;
${({ verticalAlign }) =>
verticalAlign &&
`
align-items: center;
display: flex;
`}
`;
<Column verticalAlign>
<Icon />
<input />
</Column>
<Column>
<Icon />
<input />
</Column>
You can also work with classes, but it has some specificities -> Styling normal React components