使用 Next.JS 将 CSS 类名传递给组件答案

【问题标题】：Pass CSS class name to component with Next.JS使用 Next.JS 将 CSS 类名传递给组件
【发布时间】：2020-11-02 10:08:08
【问题描述】：

我是 NextJS 新手，目前正在转换一个普通的 ReactJS 项目。

我还没有真正了解的一件事是如何正确使用 CSS。

我有一个 Button 组件，它采用标准类和来自父组件的动态类名。如您所见，类名正在通过道具按钮类传递 - 我如何正确处理这些类名？目前它显示未定义。

<Button buttonClass={"primary__button hero-button"}>Jetzt loslegen</Button>


import React from "react";
import style from "./button.module.scss";

export const Button = ({children, buttonClass, onClick}) => {

    return (
        <button className={style.basic__button + " " + style[buttonClass]} onClick={onClick}>{children}</button>
    )

};

【问题讨论】：

你能分享你的button.module.scss吗？好像您正在将 buttonClass primary__button hero-button 传递给组件，您有这样的 className 吗？
@Shyam 是的，它们在这个 scss 文件中

标签： javascript reactjs next.js

【解决方案1】：

提供的 buttonClass 属性可以是多个类名。你必须能够应付。

这是一个如何解析的示例。

export const Button = ({children, onClick, buttonClass = ''}) => {

  const css = buttonClass
    .trim()
    .split(' ')
    .map((c) => styles[c]).join(' ')

    return (
        <button 
          className={`${style.basic__button ${css}`} 
          onClick={onClick}>
            {children}
        </button>
    )

};

【讨论】：

【解决方案2】：

与 ES6 一样，这也应该可用：

<button className={classnames(styles.basic__button, css)} onClick={onClick}>{children}</button>

【讨论】：