Next.js Discord

Discord Forum

Dynamic styling in v13..

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
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?

14 Replies

@American black bear 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?
joulev
By that i remove the purpose of using the app directory actually, so i don't want to do that.
runtime css cannot work in server components so you must use client component. And you already see that it is possible to use client components with styled components.

i didn't read the rest of the post.
American black bearOP
Is it still possible to server side render components if i don't use styled components in there? That's something i don't read in the docs actually.
the css that is built at build time and doesn't change
e.g. vanilla css, sass, tailwind
American black bearOP
So i can fetch data inside a client side components, and also use the fetched data inside of it without any issues, am i getting that right?
(and fetch the data on server side level i mean then)
joulev
the example i told you fetches the data in a server component
it's perfectly fine to do it like that
American black bearOP
So everyhing below "use client"; is client side then? and everything above is server side?
joulev
if you want to use a route handler + router-query/swr to do client-side fetching, it is fine as well
yes
American black bearOP
Hmm okay that sound somewhat useful i will check that out, thank you