Pass CSS class name to component with Next.JS

Question

I'm new to NextJS and currently converting a plain ReactJS project.

One thing I don't really get yet is how to properly use CSS.

I have a Button component that takes a standard class plus dynamic class names from the parent component. As you can see the class names are being passed through the prop button class - how do I properly process these class names? Currently it says undefined.

<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>
    )

};

can you share your button.module.scss? It seems like you are passing buttonClass primary__button hero-button to component, do you have such className? — Shyam
– Shyam, Commented Nov 2, 2020 at 10:18

Kunukn · Accepted Answer · 2020-11-02 10:35:33Z

1

The provided buttonClass prop can be multiple classNames. You have to be able to handle that.

Here's an example of how to parse this.

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>
    )

};

answered Nov 2, 2020 at 10:35

Kunukn

2,2361 gold badge17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

helrabelo · Accepted Answer · 2020-11-02 11:50:27Z

0

As in ES6, this should also be available:

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

answered Nov 2, 2020 at 11:50

helrabelo

5514 silver badges8 bronze badges

Collectives™ on Stack Overflow

Pass CSS class name to component with Next.JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related