javascript - 如何在样式化组件中进行条件悬停？

我有一个基于某些道具的组件，我希望能够在悬停时更改背景。但根据其他道具，悬停应该什么都不做。这可能吗？

export const Container = styled.div`

    &:hover {
        background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
    }
`

但是，这不起作用。任何建议如何做到这一点？

最佳答案

这对我有用

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
const Container = styled.div`
  & > h2 {
    &:hover {
      background: ${props => (props.shouldHover ? "red" : "none")};
    }
  }
`;
function App({ shouldHover }) {
  return (
    <Container shouldHover>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic shappen!</h2>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App shouldHover />, rootElement);

Codesandbox

关于javascript - 如何在样式化组件中进行条件悬停？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54251266/