您如何在样式化组件中进行条件悬停？答案

【问题标题】：How do you do conditional hovering in styled components?您如何在样式化组件中进行条件悬停？
【发布时间】：2019-01-19 00:44:32
【问题描述】：

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

export const Container = styled.div`

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

但是这不起作用。有什么建议可以做到吗？

【问题讨论】：

Styled Components: props for hover的可能重复

标签： javascript reactjs styled-components

【解决方案1】：

这将起作用：

export const Container = styled.div`
    ${ props => props.shouldHover 
        ? '&:hover { background: red }' 
        : ''
    }
`;

【讨论】：

【解决方案2】：

您可以尝试以下方法，这可能会有所帮助：

import { css, styled } from 'styled-components'

styled.div`
   ${props => props.shouldHover && css`
      &:hover {
        background: 'red';
      }
   `}
`

【讨论】：

【解决方案3】：

这对我有用

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

【讨论】：

【解决方案4】：

您可以根据传递的道具使背景成为条件。下面是一个div根据多个不同条件变化的例子。

const Container = styled.div`
  background: blue;

  &:hover {
    background: ${props => props.shouldHoverRed 
      ? 'red'
      : props.shouldHoverGreen
      ? 'green'
      : props.shouldHoverOrange
      ? 'orange'
      : 'blue'
    };
  }
`

默认为蓝色，根据传递的道具，它会在悬停时为背景呈现不同的颜色。

【讨论】：

如果可能的话，应该避免像这样的 IMO 嵌套三元组，这在可读性方面非常糟糕。
你在哪里设置 shouldHoverRed, shouldHoverGreen, shouldHoverOrange ??!