내 블로그에 게시된 원본 게시물: https://ms314006.github.io/start-learn-styled-components-extending-styles/

안녕하세요 여러분 클락입니다! 이 게시물에서는 내가 배운 스타일 구성 요소에 대해 더 많이 공유할 것입니다. 스타일이 지정된 구성 요소가 무엇인지 모르는 경우 지난 게시물로 이동할 수 있습니다.

스타일 확장

프로젝트에서 스타일 구성 요소를 사용하는 경우 프로그램 언어와 같은 방식으로 CSS를 정의할 수 있습니다. 스타일 확장은 스타일 구성 요소 중 좋은 예입니다.

스타일 구성 요소 호출Button을 정의할 수 있습니다. 이 스타일 구성 요소에서 일부 기본 CSS를 정의했습니다.

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const App = () => (
  <>
    <Button>Base Button</Button>
  </>
);

export default App;

위 코드의 결과:



버튼이 멋져 보이지만 버튼 테두리의 색상을 변경하고 다른 사람의 스타일을 유지하려면 어떻게 해야 합니까?

스타일이 지정된 다른 구성 요소를 만드시겠습니까?

const DangerousButton = styled.button`
  border: 1px solid red;
  border-radius: 5px;
  font-size: 20px;
`;

아니!

스타일을 확장하여 위와 동일한 것을 더 아름답고 유지하기 쉽게 마무리할 수 있습니다.

확장 스타일을 사용하는 방법은 아래 코드와 같이 새로운 스타일 구성 요소를 만들 때 기본 스타일 구성 요소를 제공하는 것입니다.

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const DangerousButton = styled(Button)`
  border: 1px solid red;
`;

DangerousButton는 Button의 스타일을 확장하고 위의 예에서 border와 같은 동일한 설정의 스타일을 재정의합니다.

따라서 결과는 다음과 같습니다.



너무 좋아, 그렇지? 또한 다른 태그를 사용하고 동일한 설정의 스타일을 유지하려면 태그 이름만 변경하면 됩니다. 즉, 다른 태그를 사용할 때 동일한 스타일을 확장할 수 있습니다. 방법은 스타일이 지정된 구성 요소를 사용할 때 추가as 소품과 렌더링할 태그 이름을 지정하는 것입니다.

따라서 Button의 스타일을 확장하고 a 또는 div로 렌더링하려면 as를 사용할 때 a 소품을 통해 div 또는 Button를 제공할 수 있습니다.

const App = () => (
  <>
    <Button as="a" href="https://dev.to">Base Button</Button>
    <Button as="div">Base Button</Button>
  </>
);

위의 결과인 Button는 div 및 a로 렌더링됩니다.

결론

그래서 이 포스트에 따르면 styled component를 사용하면 프로그램 언어와 유사한 방식으로 스타일을 정의할 수 있다고 말했습니다. 스타일 컴포넌트는 매우 편리하고 재미있습니다! 😃