样式组件:悬停的道具

Question

我想在申请通过&:hover时才申请- 在这种情况下:animated

const AnimationContainer = styled.div`
  transform: translate(0%);
  transition: 0.3s ease-out;

  &:hover { // apply hover only when $(props.animated) is paased
     position: fixed;
     transform: translate(0%, -30%);
     transition: 0.3s ease-out;
   }
`;

有人有建议怎么做吗？我想可以为每个属性开始应用样式.. :$(props => props.animated ? ..),但是有一个更简单的解决方案吗？

Answer 1

对!像这样:

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

const AnimationContainer = styled.div`
  transform: translate(0%);
  transition: 0.3s ease-out;

  ${props => props.animated && css`
    &:hover {
      position: fixed;
      transform: translate(0%, -30%);
      transition: 0.3s ease-out;
    }
  `}
`

export default AnimationContainer

在这里了解更多:样式组件提示和技巧.