twind-react
twind-react copied to clipboard
Classname not applying on next siblings on styled components
Hi! I'm facing a weird issue when applying padding to siblings div.
What I'm searching to do
Apply padding
depending on a prop value (align
in my case), and passing this padding
through className
to a styled component.
The code
I have four Items
with various align
value:
<Item align="left" />
<Item align="justify" />
<Item align="right" />
<Item align="left" />
textPadding
is set depending on align
value, and pass via className
to StyledItem
.
const Item = (props: { align: string }) => {
const textPadding = props.align === "left" ? "pl-2" : "pr-2";
return (
<StyledItem className={tw`${textPadding}`}>
<NestedContent />
</StyledItem>
);
};
StyledItem
is a twind/react styled component.
const StyledItem = styled("div", {
base: `bg-indigo-600 w-full h-7`
});
From here, I should have the 1st and 4th Item
components with pl-2
(because align === "left"
) and the 2nd and 3rd Item
components with pr-2
(because align !== "left"
).
But the result is different: the 4th Item
component has pr-2
applied.
![Capture d’écran 2021-04-07 à 18 18 46](https://user-images.githubusercontent.com/30386836/113900036-b2df4a80-97cd-11eb-96e8-c2528eff0f90.png)
(screenshot with padding as blue parts)
Reproduced issue in sandbox
https://codesandbox.io/s/relaxed-lederberg-9euwo?file=/src/App.tsx
What do you think? It's because we add style through className
to a styled component?
Thanks a lot :)