React의 CSS 유사 요소

React의 CSS 유사 요소

---

저는 React 컴포넌트를 만들고 있습니다. React 뒤에있는 사람 중 한 명이 멋진 프레젠테이션 에서 제안한대로 구성 요소에 CSS 인라인을 추가했습니다 . 프레젠테이션에서 ":: after"라는 제목의 슬라이드처럼 CSS 의사 클래스를 인라인으로 추가하는 방법을 찾기 위해 밤새도록 노력해 왔습니다. 불행히도 content:"";속성 만 추가 할 필요는 없지만 position:absolute; -webkit-filter: blur(10px) saturate(2);. 슬라이드는를 통해 콘텐츠를 추가하는 방법을 보여줍니다 {/* … */}.하지만 다른 속성을 어떻게 추가 하시겠습니까?

---

React 팀의 @Vjeux에서 답장을 받았습니다 .

일반 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 style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );
},

비결은 ::after새 요소를 만들기 위해 CSS에서 사용하는 대신 React를 통해 새 요소를 만들어야한다는 것입니다. 이 요소를 모든 곳에 추가하지 않으려면이를 수행하는 구성 요소를 만드십시오.

와 같은 특수 속성의 -webkit-filter경우이를 인코딩하는 방법은 대시를 제거하고 다음 문자를 대문자로 표시하는 것입니다. 그래서 그것은 WebkitFilter. 하는 {'-webkit-filter': ...}것도 효과가 있습니다.

---

인라인 스타일은 의사 클래스 또는 의사 요소를 대상으로하는 데 사용할 수 없습니다. 스타일 시트를 사용해야합니다.

CSS를 동적으로 생성하려면 가장 쉬운 방법은 DOM 요소를 만드는 것 <style>입니다.

<style dangerouslySetInnerHTML={{
  __html: [
     '.my-special-div:after {',
     '  content: "Hello";',
     '  position: absolute',
     '}'
    ].join('\n')
  }}>
</style>
<div className='my-special-div'></div>

---

인라인 스타일은 의사 또는 at- 규칙 (예 : @media)을 지원하지 않습니다. 권장처럼 CSS 상태에 대한 자바 스크립트로 구현할 CSS의 기능 범위 :hover를 통해 onMouseEnter와 onMouseLeave같은 의사 요소를 재현하기 위해 더 많은 요소를 사용하여 :after및 :before단지 외부 스타일 시트를 사용하는 방법을.

개인적으로 이러한 모든 솔루션을 싫어합니다. JavaScript를 통해 CSS 기능을 다시 구현하는 것은 확장 성이 좋지 않으며 불필요한 마크 업을 추가하지도 않습니다.

각 개발자가 .NET과 같은 CSS 기능을 다시 만들고있는 대규모 팀을 상상해보십시오 :hover. 각 개발자 는 팀의 규모가 커짐에 따라 다르게 수행 할 것이며 , 가능하다면 수행 될 것입니다. 사실 JavaScript에는 CSS 기능을 다시 구현하는 방법 이 약 n 가지 있으며 시간이 지남에 따라 최종 결과가 스파게티 코드로 구현되는 모든 방법에 베팅 할 수 있습니다.

그래서 뭐 할까? CSS를 사용하십시오. 당신이 CSS-in-JS 캠프에 참여할 가능성이 있다고 가정 할 인라인 스타일링에 대해 물 었음을 인정했습니다 (저도 요!). HTML과 CSS를 함께 배치하는 것이 JS와 HTML을 함께 배치하는 것만 큼 가치가 있다는 것을 알았지 만, 많은 사람들은 아직 그것을 깨닫지 못합니다 (JS-HTML 배치는 처음에는 많은 저항을 가졌습니다).

이 공간에 Style It 이라는 솔루션을 만들어 React 구성 요소에 일반 텍스트 CSS를 작성할 수 있습니다. JS에서 CSS를 재창조하는 데주기를 낭비 할 필요가 없습니다. 올바른 작업에 적합한 도구, 다음은 :after다음을 사용하는 예입니다 .

npm install style-it --save

기능적 구문 ( JSFIDDLE )

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      #heart {
        position: relative;
        width: 100px;
        height: 90px;
      }
      #heart:before,
      #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
      }
      #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin :100% 100%;
      }
    `,
      <div id="heart" />
    );
  }
}

export default Intro;

JSX 구문 ( JSFIDDLE )

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        #heart {
          position: relative;
          width: 100px;
          height: 90px;
        }
        #heart:before,
        #heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: red;
          -moz-border-radius: 50px 50px 0 0;
          border-radius: 50px 50px 0 0;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          -webkit-transform-origin: 0 100%;
          -moz-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
        }
        #heart:after {
          left: 0;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transform-origin: 100% 100%;
          -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
          transform-origin :100% 100%;
        }
     `}

      <div id="heart" />
    </Style>
  }
}

export default Intro;

CSS-Tricks 에서 가져온 하트 예제

---

질문에 대한 직접적인 대답은 아니지만 styleTypescript를 사용하여 정보를 생성하는 데 어려움을 겪는 사람들에게 도움이 될 수 있습니다 .

다음이 잘못되었다는 오류가 발생했습니다.

let iconStyle = {
    position: 'relative',
    maxHeight: '90px',
    top: '25%',
}

이 오류는 "속성 '위치'유형이 호환되지 않는다"고 말했습니다. 나는 이유를 모른다.

다음과 같이 엄격한 Typescript 선언을 추가하여이 문제를 해결했습니다.

let iconStyle: CSSProperties = {
    position: 'relative',
    maxHeight: '90px',
    top: '25%',
}

작동합니다.

ReferenceURL : https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react