Styletron을 사용하여 가상 클래스로 의사 요소 스타일을 지정하는 방법

Question

버튼에 재료 디자인 잔물결 애니메이션을 추가하려 할 때 순수한 CSS 구현 here을 사용하고 사용했습니다.

하지만 지금은 Styletron으로 이전 중입니다. 어떻게하면 다시 만들 수 있습니까?

.ripple-class { 
    /* props */ 
} 

.ripple-class:after { 
    /* props */ 
} 

.ripple-class:active:after { 
    /* props */ 
} 

styletron? 나는이

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
    // :after props 
    }, 
    ':active:after': { 
    // more props 
    } 
}); 

그리고

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
    // :after props 
    }, 
    ':active': { 
    ':after': { 
     // more props 
    } 
    } 
}); 

버튼은 애니메이션하지 않습니다 시도했습니다. 실제 CSS를 스타일 태그에 넣으면 제대로 작동합니다.

Answer 1

시도한 첫 번째 시도가 작동해야하지만 content 속성을 따옴표로 묶어야합니다. 그렇지 않으면 결과 CSS에 값이 없습니다. 그러면 전체 :after 의사가 CSS에서 무시됩니다. content 속성에 대한 잘못된 값) :

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
     content: '""',     // '""' (literally "") is the value not '' (literally nothing) 
     // :after props 
    }, 
    ':active:after': { 
     content: '""', 
     // more props 
    } 
}); 

':after': { content: '' } 때문에 잘못이 :after { content: }과 같이 CSS가 발생합니다.

반면에 ':after': { content: '""' }은 올바른 모양 인 :after { content: ""}과 같은 CSS를 생성합니다.