时间戳

首页 > 解决方案 > 我如何在反应中一起使用引导程序和自定义 css，即 home.module.css？

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

问题描述

我正在尝试使用多个类在引导卡上获得提升的按钮效果和淡入淡出动画。
到目前为止，这是我的代码
index.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

.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;
}

如何使用 classname='card text-white(bs) Improvement(home)'？
有些景点说使用 {style.class} 但这让我只使用一个类。如何在同一个引号中获得多个 css 类？

标签： javascriptreactjswebnext.js

解决方案

尝试使用模板文字，我目前正在处理一个 nextjs 项目并遇到了同样的问题，使用模板文字为我解决了这个问题。

例如。

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

看看是否同样适合你。

推荐阅读