在 Next.JS 中将 Bootstrap 类 与自定义 CSS 相结合

Question

所以我对 Next.JS 还很陌生，一直在尝试将它与 Bootstrap 一起使用。问题是，我不能在 className 字段中将 Bootstrap 类 与我自己的自定义 CSS 类 一起使用。我在这里找到了这个确切问题的两个答案，他们都建议使用模板文字。但是，这对我不起作用。

这就是我的代码目前的样子。

import homeSytle from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className='text-center h-100'>
      <div className={'${homeSytle.bgMain} container-fluid'}>
        <h1>Test</h1>
        <button type="button" className="btn btn-primary mt-5">Primary</button>
      </div>
    </div>
  )
}

According to this answer，上面的代码应该可以正常工作。但是，VS Code 一直说 homeStyle 导入从未使用过，不用说，我看不到我的背景图片。

如何在同一个 className 属性中使用我自己的自定义 CSS 类 编写 Boostrap 类？

Answer 1

当您必须组合多个 类（module-based 和现成的

时，请使用 back-ticks 而不是单引号

import homeSytle from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className='text-center h-100'>
      <div className={`${homeSytle.bgMain} container-fluid`}>
        <h1>Test</h1>
        <button type="button" className="btn btn-primary mt-5">Primary</button>
      </div>
    </div>
  )
}