ReactJS Bootstrap карта при наведении

Question

Кто-нибудь знает, как я могу изменить границу на 'основной' для карты Bootstrap в ReactJS, когда я нажимаю на карту?

Я пробовал следующее:

const StateTileStyled = styled.div`
  &:hover {
    cursor: pointer;
    border:'primary'
  }
`;

export function StateTile({ name, currentFavorite, setCurrentFavorite}) {

  return (
    <StateTileStyled>
      <Row style={{ justifyContent: "space-evenly" }}>
        <Card
          style={{ width: "20rem", marginBottom: "5px" }}
          onClick={setCurrentFavorite}
          currentFavorite={currentFavorite}
        >
          <Card.Header> {name}</Card.Header>
          <Card.Body>
            <div> Test </div>
          </Card.Body>
        </Card>
      </Row>
    </StateTileStyled>
  );
}