reactjs - 来自通用和模块化风格的多个类

Question

假设我有两种不同风格的源代码，一种来自 bulma.sass，另一种来自 module.scss

这是代码

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

在这种情况下，我需要从 bulma 添加其他类。所以我的问题是如何将另一个类添加到 Link 元素中？

Answer 1

如果两种样式都断言为常规 css 类，您可以使用 clsx 或 classnames 有条件地应用它们

import clsx from 'clsx'

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

    return <div className={compoundStyle} />
}

您还可以使用字符串插值获得相同的结果

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