So.. I was about to use Styled Components inside my new project that i'm building. But after reading the docs, it seems likes it's actually crappy supported at the moment, and when i google i see that dynamic styling is not working, and i need to make everything have the 'use client'. By that i remove the purpose of using the app directory actually, so i don't want to do that.

Im building this website with a headless cms. I get the data from pages with a API but i also get styling with the API, this is where i can set styled (colors) for different parts in the website.

So like in this example, i want to styling the link in the menu:

const MenuLink = ({ url, children, text, active }: { url: string; children: ReactNode, text: string, active: string }) => {

    return (
        <a href={url}>
            {children}
        </a>
    );
}

export default MenuLink;

Where color and active have a hex code (#f8f8f8 and #f00900) for example. I can't be the only one that want to make use of this in V13 right? I know that tailwind does not support this either, and i know that Styled Components can work with this, but that is not well supported as of now, but is there any other way to make t his work for now?