title: How do you remove text-decoration (underline) on the text in a Bootstrap Card when you make the card clickable?
body: <p>I added an onClick function to the Card so you can go to the item detail view and read more and see more images. The onClick makes the text blue and gives it an underline. I overrode the blue text, but I cannot seem to remove the blue line when I hover.</p>
  
  <p>Component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { withRouter } from 'react-router';
  import { Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle } from 'reactstrap';
  import './ItemCard.css';
  
  class ItemCard extends Component {
  
    render() {
  
      return (
      &lt;div&gt;
        &lt;Card className="text-center item-card" onClick={this.props.clicked} &gt; 
          &lt;CardImg top width="100%" src={this.props.image} alt="Card image cap" /&gt;
          &lt;CardBody className="item-card-body"&gt;
            &lt;CardTitle&gt;{this.props.title}&lt;/CardTitle&gt;
            &lt;CardSubtitle&gt;${this.props.price}&lt;/CardSubtitle&gt;
            &lt;CardText&gt;{this.props.description}&lt;/CardText&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default withRouter(ItemCard);
  </code></pre>
  
  <p>Component CSS:</p>
  
  <pre><code>.item-card {
    max-width: 20em;
    flex: 1;
    color: black;
  }
  
  .item-card :hover {
    color: black;
    text-decoration: none !important;
  }
  </code></pre>