Next.js multiple class scss from different files

July 12, 2022

A long search for information about this did not lead to success, so I would like to ask…

I have a component for creating "h1-h6" tags with their own styles:

import {HTagProps} from './HTag.props'
import styles from './HTag.module.scss'

export const HTag = ({children, h, ...props}: HTagProps) => {
    switch (h) {
        case 'h1':
            return (<h1 className={styles.h1} {...props}>{children}</h1>)
        case 'h2':
            return (<h2 className={styles.h2} {...props}>{children}</h2>)
        case 'h3':
            return (<h3 className={styles.h3} {...props}>{children}</h3>)
        case 'h4':
            return (<h4 className={styles.h4} {...props}>{children}</h4>)
        case 'h5':
            return (<h5 className={styles.h5}{...props}>{children}</h5>)
        case 'h6':
            return (<h6 className={styles.h6} {...props}>{children}</h6>)
        default:
            return <></>
    }
}

And it works well
show image

But when I use my component by adding a new class to it, for example, to add color and position, then my built-in component classes h1-h6 are removed

<HTag className={styles.slider_top__title} h={'h1'}>
    Make storytime magical
</HTag>

show image

Is there any way I can make both classes work together?

>Solution :

You can concat 2 className together

 export const HTag = ({children, className h, ...props}: HTagProps) => {
    switch (h) {
        case 'h1':
            return (<h1 className={`${styles.h1} ${className}`} {...props}>{children}</h1>)
        case 'h2':
            return (<h2 className={`${styles.h2} ${className}`} {...props}>{children}</h2>)
        case 'h3':
            return (<h3 className={`${styles.h3} ${className}`} {...props}>{children}</h3>)
        case 'h4':
            return (<h4 className={`${styles.h4} ${className}`} {...props}>{children}</h4>)
        case 'h5':
            return (<h5 className={`${styles.51} ${className}`}{...props}>{children}</h5>)
        case 'h6':
            return (<h6 className={`${styles.h6} ${className}`} {...props}>{children}</h6>)
        default:
            return <></>
    }
}

or you can use classnames

import {HTagProps} from './HTag.props'
import styles from './HTag.module.scss'
import cn from 'classnames';

export const HTag = ({children, className, h, ...props}: HTagProps) => {
    switch (h) {
        case 'h1':
            return (<h1 className={cn(styles.h1, className)} {...props}>{children}</h1>)
        case 'h2':
            return (<h2 className={cn(styles.h2, className)} {...props}>{children}</h2>)
        case 'h3':
            return (<h3 className={cn(styles.h3, className)} {...props}>{children}</h3>)
        case 'h4':
            return (<h4 className={cn(styles.h4, className)} {...props}>{children}</h4>)
        case 'h5':
            return (<h5 className={cn(styles.h5, className)}{...props}>{children}</h5>)
        case 'h6':
            return (<h6 className={cn(styles.h6, className)} {...props}>{children}</h6>)
        default:
            return <></>
    }
}