I’m writing a React component for a navbar of a personal site. I am using a list called navItems
to track the name, color, and link for each navbar item:
const navItems = [
{
name: "home",
color: "sky-700",
link: "/"
},
{
name: "bio",
color: "green-500",
link: "/bio"
},
{
name: "blog",
color: "yellow-300",
link: "/blog"
},
]
I then have a Navbar
component to render onto the rest of the page, using navItems.map
to transform the list into several Link
s, using a separate constant cl
to construct the CSS I want for each Link
:
export function Navbar() {
return (
<aside className="-ml-[8px] mb-16 tracking-tight">
<div className="lg:sticky lg:top-20">
<nav
className="flex flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative"
id="nav"
>
<div className="flex flex-row space-x-0 pr-10">
{navItems.map(navItem => {
const cl = `transition-all text-${navItem.color} flex align-middle relative py-1 px-2 m-1`
return (
<Link
key={navItem.link}
href={navItem.link}
className={cl}
>
{navItem.name}
</Link>
)
})}
</div>
</nav>
</div>
</aside>
)
}
It seems to render fine, but the rendered components do not have colors displayed.
Strangely, if I add an unused constant next to cl
with the name of the color attribute, it will start displaying that particular color correctly (and the rest unchanged), e.g.:
{navItems.map(navItem => {
const unused = "text-green-500"
const cl = `transition-all text-${navItem.color} flex align-middle relative py-1 px-2 m-1`
return (
<Link
key={navItem.link}
href={navItem.link}
className={cl}
>
{navItem.name}
</Link>
)
})}
...
Anyone have any idea why this is behaving like this?
Tried to populate CSS into React Link
s dynamically. Expected the CSS to render on the page, but it did not.
2
Answers
From your description I assume you use tailwind, then dynamically created classnames won’t work
Read more here
Problem :
Cause :
Solution :
Update
navItems
:And inside map function, update
cl
:Please Read :