Multiple class from generic and modular styles

user_9091896 0
Viewed 120

Let say i have two different style source, one from bulma.sass and the other from module.scss

this is the code 

import React from 'react' 
import { Link } from 'gatsby' 
import HeaderStyles from './header.module.scss'
import '../styles/bulma.sass'

const Header = () => {
  return (
     <Link className={HeaderStyles.link} to="/">Home</Link>
  )
}

In this case i need to add other class from bulma. So my question is how to add the other class into the Link element?

gatsby reactjs
1 Answers

If both styles asserts to regular css classes you could use clsx or classnames to conditionally apply them

import clsx from 'clsx'

const Component = () =>{
    const compoundStyle = clsx({
        [HeaderStyles] : true,
        [BulmaStyles] : true
    })

    return <div className={compoundStyle} />
}

You could also achieve the same result using string interpolation

const styles = `${styleA} ${styleB}`
return <div className={styles} />
user_101065800
Related