React中的内联CSS样式：如何实现a：hover？

reactjs React.js

梅十三

2020-03-11

我非常喜欢React中的内联CSS模式，并决定使用它。

但是，您不能使用:hover和类似的选择器。那么在使用内联CSS样式时实现悬停时高亮显示的最佳方法是什么？

#reactjs的一个建议是拥有一个Clickable组件并像这样使用它：

<Clickable>
    <Link />
</Clickable>

该Clickable有一个hovered状态，并将其作为道具的链接。但是，Clickable（我的方式来实现它）包裹Link的div，以便它可以设置onMouseEnter并onMouseLeave给它。不过，这会使事情变得有些复杂（例如，span包裹在div行为上与有所不同span）。

有没有更简单的方法？

第651篇《React中的内联CSS样式：如何实现a：hover？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

西门逆天 2020.03.11

<Hoverable hoverStyle={styles.linkHover}>
  <a href="https://example.com" style={styles.link}>
    Go
  </a>
</Hoverable>

可悬停定义为：

function Hoverable(props) {
  const [hover, setHover] = useState(false);

  const child = Children.only(props.children);

  const onHoverChange = useCallback(
    e => {
      const name = e.type === "mouseenter" ? "onMouseEnter" : "onMouseLeave";
      setHover(!hover);
      if (child.props[name]) {
        child.props[name](e);
      }
    },
    [setHover, hover, child]
  );

  return React.cloneElement(child, {
    onMouseEnter: onHoverChange,
    onMouseLeave: onHoverChange,
    style: Object.assign({}, child.props.style, hover ? props.hoverStyle : {})
  });
}

猿西门Tom 2020.03.11

我不是100％确定这是否是答案，但我使用内联颜色和图像来模拟CSS：hover效果的技巧。

`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);

CSS：

.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

悬停前

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
}

悬停时

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

示例：https：//codepen.io/roryfn/pen/dxyYqj？editors = 0011

神乐古一 2020.03.11

首先，使用setState的onMouseOver和onMouseLeave对我来说似乎有些负担-但是由于这是React的工作方式，因此这对我来说似乎是最简单，最干净的解决方案。

例如，在服务器端渲染主题css也是一个很好的解决方案，并且可以使React组件更加干净。

如果您不必在元素上添加动态样式（例如用于theming），则根本不应该使用内联样式，而应使用css类。

这是传统的html / css规则，用于保持html / JSX的简洁和简洁。

Tom阳光达蒙 2020.03.11

对于在react组件中具有内联样式（以及还使用：hover CSS函数），这可能是一个不错的技巧：

...

<style>
  {`.galleryThumbnail.selected:hover{outline:2px solid #00c6af}`}
</style>

...

达蒙A宝儿 2020.03.11

完全的CSS支持正是这大量CSSinJS库有效运行的原因，您需要生成实际的CSS，而不是内联样式。此外，在较大的系统中，内联样式的响应速度要慢得多。免责声明-我维护JSS。

仲羽蛋蛋 2020.03.11

我处于同样的情况。确实像在组件中保留样式的模式，但悬停状态似乎是最后的障碍。

我所做的是编写一个mixin，您可以将其添加到需要悬停状态的组件中。这个混入将向hovered您的组件状态添加一个新属性。它将被设置为true，如果在组件，并设置主DOM节点的用户悬停回false，如果用户离开元素。

现在，在组件渲染函数中，您可以执行以下操作：

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

现在，每次hovered状态更改时，组件都会重新呈现。

我还为此创建了一个沙箱存储库，我用它自己来测试其中的一些模式。如果您想查看我的实施示例，请查看。

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin

null 2020.03.11

晚会，但要有解决方案。您可以使用“＆”来定义第n个Child等的样式：

day: {
    display: "flex",
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    width: "50px",
    height: "50px",
    transition: "all 0.2s",
    borderLeft: "solid 1px #cccccc",

    "&:hover": {
      background: "#efefef"
    },
    "&:last-child": {
      borderRight: "solid 1px #cccccc"
    }
},