我如何在反应中一起使用引导程序和自定义 css，即 home.module.css？

Question

I'm trying to use multiple classes to get an elevated button effect and a fade animation on a bootstrap card.我正在尝试使用多个类在引导卡上获得提升的按钮效果和淡入淡出动画。
here is my code so far到目前为止，这是我的代码
index.js索引.js

import Head from 'next/head'
import Nav from '../partials/nav'
import style from '../styles/Home.module.css'
import cx from 'classnames'
export default function Home() {
  function handleClick(e) {
      console.log(e)
  }
  return (
    <div className="container-fluid">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossOrigin="anonymous"></link>
      </Head>
      <main>
        <Nav />
        <div className="row row-cols-1 row-cols-md-2 category">
          <div className="col mb-4">
            <div className={cx[style.elevate,'card']} onClick={() => handleClick(1)}>
              <img src="https://placekitten.com/380/200" className="card-img" alt="..." />
              <div className="card-img-overlay text-white">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p className="card-text">Last updated 3 mins ago</p>
              </div>
            </div>
          </div>
          <div className="col mb-4">
            <div className="card text-white elevate" onClick={() => handleClick(2)}>
              <img src="https://placekitten.com/380/200" className="card-img" alt="..." />
              <div className="card-img-overlay">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p className="card-text">Last updated 3 mins ago</p>
              </div>
            </div>
          </div>
          <div className="col mb-4">
            <div className="card text-white elevate">
              <img src="https://placekitten.com/380/200" className="card-img" alt="..." />
              <div className="card-img-overlay">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p className="card-text">Last updated 3 mins ago</p>
              </div>
            </div>
          </div>
          <div className="col mb-4">
            <div className="card text-white elevate">
              <img src="https://placekitten.com/380/200" className="card-img" alt="..." />
              <div className="card-img-overlay">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p className="card-text">Last updated 3 mins ago</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossOrigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossOrigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossOrigin="anonymous"></script>
    </div>
  )
}

home.module.css主页.module.css

.elevate:hover {
  box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
  margin: 5px;
  cursor: pointer;
}

.elevate:hover {
  opacity: 1;
  transition: 1s;
  /* A 1 second transition. */
}

.fade-in {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

how do I use classname='card text-white(bs) elevated(home)'?我如何使用 classname='card text-white(bs)leved(home)'？
some sights say use {style.class} but that makes me use only one class.有些景点说使用 {style.class} 但这让我只使用一个类。 how do I get multiple css classes in the same quotes?如何在相同的引号中获得多个 css 类？

Answer 1

Try using Template literals, I am currently working on a nextjs project and came across the same issue, and using Template literals solved the issue for me.尝试使用模板文字，我目前正在处理 nextjs 项目并遇到了同样的问题，使用模板文字为我解决了这个问题。

Egs.例如。

<div className={`d-flex ${classes.root} ${styles.parent}`}>

See if the same works for you.看看是否同样适用于您。

Answer 2

className={"card text-white elevated"}

这可以帮助你（ https://www.npmjs.com/package/classnames ）

我如何在反应中一起使用引导程序和自定义 css，即 home.module.css？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-10-22 12:47:42

解决方案2
0 2020-10-22 12:40:15

我如何在反应中一起使用引导程序和自定义 css，即 home.module.css？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-10-22 12:47:42

解决方案2 0 2020-10-22 12:40:15

解决方案1
1 已采纳 2020-10-22 12:47:42

解决方案2
0 2020-10-22 12:40:15