スタイル設定コンポーネント：ホバー

Question

ための小道具私は小道具が渡されただけ&:hover適用する - このsituacionでは：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 { css } from 'styled-components' 

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

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

は、ここには、こちらをご覧ください：styled-components tips and tricks。