时间戳

首页 > 解决方案 > 使用 Gatsby + Bootstrap React + scss 模块设置卡片内容仅在悬停时可见

reactjs - 使用 Gatsby + Bootstrap React + scss 模块设置卡片内容仅在悬停时可见

问题描述

首先，我正在使用的堆栈： - React: Gatsby - Typescript - Scss（为每个组件使用模块） - React Bootstrap

我试图仅在鼠标悬停在 React Bootstrap Card 上时才显示其内容。问题是我正在为 scss 使用 Gatsby 模块，我找不到直接访问 .card-img-overlay 类以更改其悬停属性的方法，因为模块会将其名称添加到类中。

我的解决方案是在它周围包裹一个 div。但是它不起作用。内容是隐藏的，但是当鼠标悬停它时没有任何反应。这是代码：

项目卡.tsx

import React from 'react'
import { Card } from 'react-bootstrap'
import styles from './projectCard.module.scss'

interface ProjectInfo {
  title: string
  description: string
  imageSrc: any
}

const ProjectCard = (project: ProjectInfo) => (
  <Card className="bg-dark text-white">
    <Card.Img src={project.imageSrc} alt="Card image" />
    <div className={styles.cardContent}>
      <Card.ImgOverlay>
        <Card.Title> {project.title} </Card.Title>
        <Card.Text> {project.description} </Card.Text>
      </Card.ImgOverlay>
    </div>
  </Card>
)
export default ProjectCard

projectCard.module.scss

.cardContent {
  visibility: hidden;
}

.cardContent:hover {
  visibility: visible;
}

任何帮助，将不胜感激！

标签： reactjsgatsbyreact-bootstrap

解决方案

我能够在先前评论的帮助下找到解决方案（有人删除了评论..但无论如何感谢！）

我跟着这个codepen：https ://codepen.io/askibinski/pen/RwWwxxO

<Card className={styles['card']}>
    <Card.Img src={project.imageSrc} alt="Card image" className={styles['card-content-image']} />

    <div>
      <Card.ImgOverlay className={styles['card-content']}>
        <Card.Title className={styles['card-content-text']}> {project.title} </Card.Title>
        <Card.Text className={styles['card-content-text']}> {project.description} </Card.Text>
        <Card.Text className={styles['card-content-text']}> {project.technologies} </Card.Text>
      </Card.ImgOverlay>
    </div>
  </Card>

请注意，我无法直接访问 Bootstrap 元素，因此我为每个元素创建了类。此外，gatsby 有一个 camelCase 约定，但由于它不符合 css 标准，我通过添加到 gatsby-config.js 来覆盖它

'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        cssLoaderOptions: {
          camelCase: false,
        },
      },
    }

但是，这只是解决问题的创可贴。如果可能，我仍然想访问 React Bootstrap 变量。例如，我想将 Card.Img 居中。我曾尝试使用类名，但它无法访问图像本身。

这是尝试访问 React Bootstrap 名称的代码，但它不起作用

.card-img {
  // any type of css here doesn't have any effect
}

推荐阅读