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

您还可以使用string interpolation

获得相同的结果

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

通用和模块化样式的多个类

1 个答案: