React Styled Components — 기존 CSS 및 템플릿 태그

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 기존 CSS가 styled-components의 스타일로 생성된 styled-components와 충돌하지 않도록 처리하는 방법을 살펴보겠습니다. 또한 다른 구성 요소를 참조하는 방법을 살펴봅니다.

기존 CSS

동일한 코드에서 생성된 클래스 이름 외에 styled-components으로 생성된 클래스 이름을 전달할 수 있습니다. 이는 styled(Component) 함수로 생성된 구성 요소에 적용됩니다.

예를 들어 다음과 같이 할 수 있습니다.
styles.css  :

.lightgreen {
  background-color: lightgreen;
}

App.js  :

import React from "react";
import styled from "styled-components";
import "./styles.css";

const Foo = ({ className }) => {
  return <div className={`lightgreen ${className}`}>foo</div>;
};

const StyledFoo = styled(Foo)`
  color: green;
`;

export default function App() {
  return (
    <div>
      <StyledFoo>foo</StyledFoo>
    </div>
  );
}

위의 코드에는 StyledFoo 구성 요소에서 생성된 Foo 구성 요소가 있습니다. styled(Foo)을 호출했으므로 className에서 호출할 때 생성된 Foo 소품에 액세스할 수 있습니다.

이제 styles.css에서 했던 것처럼 다른 CSS 파일의 클래스 이름과 className에서와 같이 styled-components 소품을 통해 className에서 생성된 Foo을 결합할 수 있습니다.

따라서 밝은 녹색 배경에 녹색 'foo'가 있습니다.

특이성 문제

위의 예에는 충돌하는 스타일이 없습니다. 그러나 CSS의 스타일과 styled-components으로 생성된 스타일 구성요소의 스타일이 충돌하는 경우가 많습니다.

예를 들어 다음 예제가 있는 경우:
styles.css  :

.red {
  color: red;
}

App.js  :

import React from "react";
import styled from "styled-components";
import "./styles.css";

const StyledFoo = styled.div`
  color: green;
`;

export default function App() {
  return (
    <div>
      <StyledFoo className="red">foo</StyledFoo>
    </div>
  );
}

red 클래스의 스타일은 StyledFoo 구성 요소에 직접 삽입되기 때문에 녹색보다 우선합니다.

특정성의 규칙에 따라 우리가 스타일링하는 구성 요소에 가장 가까이 삽입된 스타일이 우선합니다.
StyledFoo 구성 요소의 스타일을 유지하려면 StyledFoo 구성 요소 외부로 이동합니다.
styled-components 에 의해 생성된 CSS 클래스 이름의 네임스페이스를 지정하여 충돌을 피할 수 있습니다. 이를 위해 babel-plugin-styled-components-css-namespace 플러그인을 사용합니다.

다음을 실행하여 설치하기만 하면 됩니다.

npm install @quickbaseoss/babel-plugin-styled-components-css-namespace

그런 다음 다음과 같이 Babel 구성에 추가합니다.

"babel": {
  "plugins": [
    "@quickbaseoss/babel-plugin-styled-components-css-namespace"
  ]
}

태그가 지정된 템플릿 리터럴

태그가 지정된 템플릿 리터럴은 ES6의 새로운 기능입니다. 다음 코드는 동일합니다.

foo `string`
foo(['string'])

여기서 foo은 다음과 같은 함수입니다.

const foo = () => {}

styled-components은 CSS 문자열을 태그에 전달한 다음 자체 처리를 수행하여 새 구성 요소를 반환하여 스타일이 추가된 새 구성 요소를 반환합니다.

구성 요소에서 다른 구성 요소 참조

styled-component으로 생성된 스타일 구성 요소는 해당 스타일의 다른 구성 요소를 참조할 수 있습니다. 예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

import React from "react";
import styled from "styled-components";
import "./styles.css";

const Foo = styled.div`
  color: green;
`;

const HoveredFoo = styled.div`
  ${Foo}:hover {
    color: red;
  }
`;

export default function App() {
  return (
    <div>
      <HoveredFoo>
        <Foo>foo</Foo>
      </HoveredFoo>
    </div>
  );
}

위의 코드에서 콘텐츠 스타일을 빨간색으로 지정하는 Foo 구성 요소를 만들었습니다. 그런 다음 HoveredFoo 구성 요소를 생성하여 마우스를 가져가면 Foo을 녹색으로 만듭니다.

그런 다음 HoveredFoo 을 Foo 으로 둘러싸면 마우스가 'foo' 위에 있지 않으면 녹색으로 표시되지만 마우스를 'foo' 위로 가져가면 빨간색으로 바뀝니다.

결론

styled-components에서 생성된 클래스 이름을 기존 클래스 이름과 결합하여 기존 CSS를 처리할 수 있습니다.

또한 @quickbaseoss/babel-plugin-styled-components-css-namespace Babel 플러그인을 사용하여 styled-components으로 생성된 클래스의 네임스페이스를 지정할 수 있습니다.

마지막으로 styled-component 으로 생성된 다른 구성 요소의 스타일에서 다른 구성 요소를 참조할 수 있습니다.