내 블로그에 게시된 원본 게시물: https://ms314006.github.io/Start-learn-styled-components-You-can-styling-any-component-you-want/

안녕하세요 여러분 클락입니다! 이 게시물에서는 더 많은 스타일 구성 요소에 대해 계속 공유하고 연습할 것입니다!

구성 요소 스타일 지정

styled component 문서에서 이 부분을 읽을 때 styled component가 저에게 매우 강력하다고 생각합니다. 스타일이 적용된 구성 요소에 대해 이전에 공유한 게시물에서 우리 모두는 styled가 원하는 스타일로 구성 요소를 생성할 수 있고 이를 사용하거나 확장할 수 있다는 것을 알고 있습니다.

이 장에서는 HTML 태그 대신 기존 구성 요소의 스타일을 지정하는 방법을 배웁니다!

react-router-dom 설치

구성 요소 스타일링을 연습하려면 다른 요소 UI 프레임워크에서 제공하는 구성 요소를 사용해야 합니다.

따라서 먼저 우리 프로젝트에서 react-router-dom을 사용해야 합니다(이것이 일반적인 것이라고 생각합니다). 제공되는 bu react-router-dom은 완벽한 구성 요소이므로 styled 구성 요소를 통해 스타일링을 시도할 수 있습니다.

npm i react-router-dom

기존 구성 요소 스타일 지정

이전 단계를 마치면 react-router-dom에서 Link를 가져올 수 있습니다.

import React from 'react';
import { HashRouter, Link } from 'react-router-dom';

const App = () => (
  <HashRouter>
    <Link>I am a link</Link>
  </HashRouter>
);

export default App;

그럼... 인라인 스타일로 작성해야 할까요? 아래 링크 코드:

const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
  </HashRouter>
);

아니!

의 Link 구성 요소를 통해 Link를 래핑할 수 있습니다. 포장 방법은 동일합니다. Button에 styled 매개변수를 지정하면 됩니다. 코드 스니펫은 인라인 스타일과 스타일이 지정된 구성 요소를 통해 다른 점을 보여줍니다.

import React from 'react';
import { HashRouter, Link } from 'react-router-dom';
import styled from 'styled-components';

const NoneDecorationLink = styled(Link)`
  text-decoration: none;
`;

const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
    <br />
    <!--styled component-->
    <NoneDecorationLink>
      I am a style link
    </NoneDecorationLink>
  </HashRouter>
);

export default App;

스타일이 지정된 구성 요소가 인라인 스타일보다 명확하다고 생각하지만 결과는 동일합니다.

결론

따라서 스타일이 지정된 구성 요소를 사용하면 다른 요소 UI 프레임워크에서 제공하는 구성 요소를 확장하는 방법을 고려할 필요가 없습니다!