React Hover Styling

Question

Простите, если об этом спрашивали раньше, я прошел через множество ответов и не смог заставить это работать. В основном я просто после добавления цвета фона при наведении на мой элемент <p>. Я не хочу использовать JavaScript события при наведении, я хочу использовать только CSS стили.

Может кто-нибудь объяснить, почему это не работает и каково общее решение? Я пробовал так много комбинаций, например, :hover {. &:hover {, ':hover': {, '&:hover': { et c.

Спасибо.

import React from "react";
import styled from "styled-components";

const Thing = styled.p`
  background: none;
  width:200px;
  padding:20px;
  text-align: center;
  border: 1px solid white;
  margin: auto;
  ':hover': {
    background: red;
    textDecoration: underline;
  }
`;

export const BorderButton = ({text}) => (
  <Thing>
    {text}
  </Thing>
);

Answer 1

используйте :hover без '' (кавычки). То есть CSS часть, вам нужно написать Pure CSS.

Answer 2

Оказывается, у меня был другой стиль на странице, где этот компонент рендерился. Удаление этого стиля, похоже, исправило его, хотя я не понимаю, почему.

<Styles>
    <div className="main">
      <h2>Home Page</h2>
      <BorderButton />
    </div>
  </Styles> 

до

    <div className="main">
      <h2>Home Page</h2>
      <BorderButton />
    </div>

Answer 3

Наведение должно быть похоже на &: hover {...}, а не на текст, как вы упомянули,

Также убедитесь (в режиме проверки), что это значение не переопределяется в другом глобальном стиле css

const Thing = styled.p`
  color: black;
  background: none;
  width: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid white;
  margin: auto;
  &:hover {
    background: red;
    text-decoration: underline;
  }
`;

Answer 4

:hover - правильный доступ / селектор.

const Thing = styled.p`
  color: black;
  background: none;
  width: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid white;
  margin: auto;

  :hover {
    background: red;
    text-decoration: underline; // also use correct css naming!
  }
`;