时间戳

首页 > 解决方案 > 如何在 nextjs 中应用传递给组件的 className

html - 如何在 nextjs 中应用传递给组件的 className

问题描述

我 next.js，从父组件到子组件，className 作为道具传递。这里 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'
  />

各种方法都试过了，但都是徒劳的。有什么解决办法让它工作吗

标签： htmlcssnext.js

解决方案

让我们举个例子：

在/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>
    </>
  )
}

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

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

在此处输入图像描述 您可以看到，我们将所有组件作为道具传递，其中那些来自样式表（here $）

推荐阅读