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

【问题标题】：Set Card content visible only on hover with Gatsby + Bootstrap React + scss module使用 Gatsby + Bootstrap React + scss 模块设置卡片内容仅在悬停时可见
【发布时间】：2020-07-21 16:34:46
【问题描述】：

首先，我正在使用的堆栈： - 反应：盖茨比 - 打字稿 - Scss（为每个组件使用模块） - 反应引导

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

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

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

任何帮助将不胜感激！

【问题讨论】：

您能否在codesandbox.io 或任何其他平台上重现此问题？这样我就可以调查了。

标签： reactjs gatsby react-bootstrap

【解决方案1】：

在之前的评论的帮助下，我找到了解决方案（有人删除了评论……但还是谢谢！）

我关注了这个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
}

【讨论】：