Interpolation into template literals (responsive) #718
Answered
by
ben-rogerson
flavio-ever
asked this question in
General
-
Hi, I saw recently that I can't do interpolation. Interpolation into template literals #393 Obs: i'm making a responsive tab component Does not work with interpolationexport const JobsTabNavItemSelected = styled.nav(
({ activeTabId }: JobsTabNavItemSelected) => {
console.log(activeTabId)
//sm:translate-y-[calc(${String(activeTabId)} * 3rem)]
return [
tw`
bg-orange-1
absolute
z-50
top-auto
left-0
w-2
h-12
translate-x-[calc(${String(activeTabId)} * 10rem)]
`,
tw`
sm:translate-x-0
sm:translate-y-[calc(${String(activeTabId)} * 3rem)]
`,
css`
transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 0.1s;
`
]
}
) Working with cssexport const JobsTabNavItemSelected = styled.nav(
({ activeTabId }: JobsTabNavItemSelected) => [
tw`
bg-orange-1
absolute
z-50
top-auto
left-0
w-2
h-12
`,
css`
transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 0.1s;
transform: translateY(calc(${activeTabId} * 3rem));
@media (max-width: 640px) {
transform: translateX(calc(${activeTabId} * 10rem));
}
`
]
) If there's no way to improve it, fine, I'll stick with the current code. Thanks! |
Beta Was this translation helpful? Give feedback.
Answered by
ben-rogerson
Jun 28, 2022
Replies: 1 comment 1 reply
-
Yeah, the limitation means we need to drop back into plain old css for this stuff. |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
ben-rogerson
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yeah, the limitation means we need to drop back into plain old css for this stuff.
What you have shown above is a good solution.