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

Question

所以我对 Next.JS 相当陌生，并且一直在尝试将它与 Bootstrap 一起使用。问题是，我无法在现场将 Bootstrap 类与我自己的自定义 CSS 类一起使用className。我在这里找到了这个确切问题的两个答案，它们都建议使用模板文字。然而，这对我来说不起作用。

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

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

根据这个答案，上面的代码应该可以正常工作。然而，VS Code 一直说homeStyle导入从未被使用过，不用说，我没有看到我的背景图像。

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

Answer 1

当您必须组合多个基于模块和现成的类时，请使用反引号而不是单引号。

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