React에서 인라인 CSS 의사 요소(예: ::after)를 어떻게 구현할 수 있나요?

React의 인라인 CSS 의사 요소

React 구성 요소 내에서 인라인 CSS를 직접 추가할 수 있습니다. 그러나 인기 있는 React 프레젠테이션의 "::after" 슬라이드와 유사한 인라인 CSS 의사 클래스를 추가하는 기능은 어려웠습니다.

이 문제를 해결하려면 @Vjeux가 제공하는 다음 솔루션을 고려하세요. React 팀:

정상 HTML/CSS:

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

인라인 스타일로 반응:

render: function() {
    return (
        <div>
          <span>Something</span>
          <div>

여기서 중요한 차이점은 CSS에서 ::after를 사용하는 대신에 있다는 것입니다. 새 요소를 만들기 위해 React를 사용하면 새 요소를 직접 만들 수 있습니다. 원하는 경우 더 쉽게 구현할 수 있도록 이를 재사용 가능한 구성 요소로 추상화할 수 있습니다.

-webkit-filter와 같은 특수 속성의 경우 대시를 제거하고 다음 문자를 대문자로 시작하세요. 따라서 -webkit-filter는 WebkitFilter가 됩니다. {'-webkit-filter': ...}를 사용해도 작동합니다.

위 내용은 React에서 인라인 CSS 의사 요소(예: ::after)를 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!