-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Classname not applying on next siblings on styled components #5
Comments
Thanks a lot for this detailed report! I can confirm that the behavior is not correct for Using the export const Item = (props: { align: string }) => {
const textPadding = props.align === "left" ? "pl-2" : "pr-2";
return (
<StyledItem tw={textPadding}>
<NestedContent />
</StyledItem>
);
}; But I consider this still a bug. PS: I would use variants for align: https://codesandbox.io/s/quirky-fast-qlrjr?file=/src/StyledItem.tsx |
Hi @sastan! Thanks for your answer. You're totally right about variants, but in my case |
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 thispadding
throughclassName
to a styled component.The code
I have four
Items
with variousalign
value:textPadding
is set depending onalign
value, and pass viaclassName
toStyledItem
.StyledItem
is a twind/react styled component.From here, I should have the 1st and 4th
Item
components withpl-2
(becausealign === "left"
) and the 2nd and 3rdItem
components withpr-2
(becausealign !== "left"
).But the result is different: the 4th
Item
component haspr-2
applied.(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 :)
The text was updated successfully, but these errors were encountered: