React Hover样式

Question

如果以前有人问过这个问题，请原谅我，我已经回答了很多问题，但都没能解决这个问题。基本上，我只是在将鼠标悬停在<p>元素上时添加背景色。我不想使用CSS事件，我只想使用JavaScript样式。

有人能解释一下为什么这不起作用吗?常见的解决方案是什么？我尝试过很多组合，比如:hover {. &:hover {, ':hover': {, '&:hover': {等。

谢谢。

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

原来我在呈现此组件的页面上使用了另一种样式。移除这种风格似乎已经修复了它，尽管我不明白为什么。

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

至

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

Answer 2

使用不带‘’(引号)的:hover。这是CSS部分，您需要编写纯CSS。

Answer 3

: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!
  }
`;

​

​