将样式道具传递给反应组件

Question

I have a typescript Next.js app that's misbehaving (or I'm just stupid).
There's a component <CluckHUD props="styles.Moon" /> that is supposed to pass the theme as a css classname. This is supposed to customize the theme on a per-page basis.

Component here

export default function CluckHUD({ theme }: { theme: any }) {
    return (
        <nav className={{...theme}}>
            <ul className={styles.navbarNav}>

(Yes they all have closing tags, and yes I imported the component in the first file)

Except when everything runs, the class is [object Object] . Am I missing something, or is the whole approach wrong?

Answer 1

There is an easy way to solve your problem.
Please use classnames node module in your project.