如何解决React-Bootstrap卡片包裹Link后文本变色及下划线问题

这个问题我之前也碰到过！原因很简单——Link组件最终会渲染成原生的<a>标签，浏览器默认会给<a>标签内的所有文本加上蓝色和下划线样式，你之前写的.card-body样式优先级不够，覆盖不了<a>标签的默认样式。

给你几个简单的解决办法：

方法一：直接给Link添加样式（最推荐） #

直接在Link上设置textDecoration: 'none'和color: 'inherit'，这样它内部所有文本都会继承父元素的颜色，同时去掉下划线：

<Link 
  to={`/product/${category}/${id}`}
  style={{ textDecoration: 'none', color: 'inherit' }}
>
  <Card key={id} className="flex-fill productlist" onClick={() => console.log('Clicked')}>
    <Card.Img variant="top" src={image} />
    <Card.Body>
      <Card.Title>{title}</Card.Title>
      <Card.Text>{category}</Card.Text>
      <Card.Text> Current Price: {price} </Card.Text>
    </Card.Body>
  </Card>
</Link>

如果喜欢用CSS类而不是内联样式，可以定义一个全局类：

.link-no-style {
  text-decoration: none;
  color: inherit;
}

然后给Link加上这个类：

<Link to={`/product/${category}/${id}`} className="link-no-style">

方法二：针对卡片内的文本元素单独设置 #

如果你只想修改卡片内文本的样式，也可以直接给Card.Title和Card.Text加样式：

.card-body .card-title,
.card-body .card-text {
  color: black;
  text-decoration: none;
}

不过这种方法需要写更多选择器，不如方法一高效。

另外提个小细节：你卡片上的onClick={console.log('Clicked')}会在组件渲染的时候就执行，而不是点击时执行，应该改成onClick={() => console.log('Clicked')}哦～

内容的提问来源于stack exchange，提问作者Kim San