Recently, I encountered an issue where my custom colors were not working when implemented dynamically. Below, you'll find two sets of codes and screenshots: one with the dynamic code and output, and another with the static code and output.
I prefer not to hardcode them statically because I retrieve that information from a separate file that can easily change. It's more convenient for me to update it by adding instead of creating a whole new divset.
Dynamic:
<div className='w-full bg-bgWhite'>
<div className='w-1/2 grid grid-rows-3 gap-10 grid-cols-3'>
{skills.map((skill, index) => (
<div className={`p-5`}>
{createElement(skill.icon.type, {
className: `w-20 h-20`,
})}
<p className={`text-[${skill.color}]`}>{skill.color}</p>
</div>
))}
</div>
</div>
Dynamic Output: https://i.sstatic.net/wimsl.png
Static:
<div className='w-full bg-bgWhite'>
<div className='w-1/2 grid grid-rows-3 gap-10 grid-cols-3'>
{skills.map((skill, index) => (
<div className={`p-5`}>
{createElement(skill.icon.type, {
className: `w-20 h-20`,
})}
<p className={`text-[#3FB27F]`}>{skill.color}</p>
</div>
))}
</div>
</div>
Static Output: https://i.sstatic.net/QHC9s.png
QUICK SIDENOTE: Whenever I revert the code back to its dynamic form after implementing the static version, I encounter this issue: https://i.sstatic.net/enJCG.png
This problem disappears upon restarting the project.
Any assistance would be greatly appreciated! :)