如何在 nextjs 中应用传递给组件的 className答案

【问题标题】：How to apply className that is passed to component in nextjs如何在 nextjs 中应用传递给组件的 className
【发布时间】：2021-06-09 10:54:26
【问题描述】：

我 next.js，从父组件到子组件，className 作为 props 传递。这里 cardClassName 和 bgColor 是 className 属性。

function Use_Cases({ caseData, cardClassName, bgcolor }) {
  return (
    <section className={use_case.use_case_section + ' '}>
      <div
        className={clsx(
          'cx-container',
          use_case.use_case_content,
          use_case[{ cardClassName }]
        )}
      >
        <p className={clsx(use_case.section_header_text)}>Use Cases</p>
        <div className={clsx(use_case.card_section)}>
         .
         .

        </div>
      </div>
    </section>
  );
}

编辑

 <UseCase
          caseData={use_case}
          cardClassName='cdn-use-case'
          bgcolor='blue-background'
  />

尝试了各种方法，但徒劳无功。有什么办法可以解决吗

【问题讨论】：

为什么要添加bgcolor作为字符串？ clsx 是做什么的？
clsx 函数可以接受任意数量的参数。npmjs.com/package/clsx
你能澄清一下代码到底有什么问题吗？您的 <div> 元素是否试图加入三个不同的类名，但没有呈现预期的输出？如果是这样，假设use_case 是一个对象字面量，当您执行use_case[{ cardClassName }] 时，您将另一个对象字面量传递到括号中。这转换为use_case['[object Object]']。如果cardClassName 是use_case 中的属性，则可以通过use_case[cardClassName] 访问它。
是的，请添加use_case的定义以及它是从哪里进口或从哪里来的。

标签： html css next.js

【解决方案1】：

让我们举个例子：

在/index.tsx

import NewComp from '../Components/NewComp'

export default function index() {
  return (
    <div>
      <NewComp classes='class-1 my class-2' />
    </div>
  )
}

这里，class-1 my class-2 是传递给子 NewComp 的类名

在../Components/NewComp

import $ from '../Styles/card.module.css'

export default function NewComp({ classes }: { classes: string }) {
  return (
    <>
      <div className={`${$.card} ${classes}`}>
        NewComp component which will render nothing.
      </div>
    </>
  )
}

接受来自父类的类道具 ({classes}) 并使用模板文字将其传递到所需的位置。在这里，到一个 div 元素。

这是它在浏览器中的截图---

您可以看到，我们将所有组件作为 props 传递，其中的组件来自样式表（此处为 $）

【讨论】：