Styled-Suppnnet用の属性セレクタ

Question

sytled-componentを使用するときに属性セレクタを使用できますか？

&:hover, &[active='true']{ 
    transform: translateY(-4px); 
    box-shadow: 0 7px 16px 0px rgba(255,63,23,0.87), 
} 

アイデアは、私はそうでなければ、私はコードを複製する必要があり、それははるかに醜悪になっ

<Button active /> 

次持っているということです。

Answer 1

私は、コードの重複を避けるためにcssヘルパーといくつかの補間を使用します。

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

const hoverStyles = css` 
    transform: translateY(-4px); 
    box-shadow: 0 7px 16px 0px rgba(255,63,23,0.87); 
`; 

const Component = styled.div` 
    // If the component is hovered add the hoveredStyles 
    &:hover { ${hoverStyles} } 
    // If the active property is set add the hoverStyles 
    ${props => props.active && hoverStyles} 
` 

私たちはあなたのコードのアイデアのように属性セレクタや小道具を持つ特別な動作を実装する予定はありません。混乱、ハイライト/解析の問題などを避けるため、できるだけ実際のCSSから逸脱しないようにしたいと考えています。

JavaScript文字列の中に特別な魔法の構文を追加したい場合があります。 （上記参照）