styled-component에서 Style Extend 안될 때

 

 

✔️ 필요성

styled-components를 적용한 컴포넌트를 만들어놓고, 그 컴포넌트를 다시 가지고 올 때 일부 CSS를 수정하고 싶을 때가 있다. 그리고 그 때 styled(component) 이렇게 해서 쓰는 것을 보통 Extend styled-component라고 이야기한다.

 

그런데 Extend Style이 안 먹을 때가 있다. 

 

새로 적용하는 CSS style을 어떤 컴포넌트에다가 써야할 지 모르는 경우에 보통 그러하다

import React from "react";
import styled from "@emotion/styled";

const Outside = styled.div`
`;

const Inside = styled.div`
`;

interface Props {
  children: React.ReactNode;
}

const PageHeader = ({ children }: Props) => {
  return (
    <Outside>
      <Inside>{children}</Inside>
    </Outside>
  );
};

export default PageHeader;

import styled from '@emotion/styled';
import PageHeader from './PageHeader';

const Container = styled(PageHeader)`
  padding-top: 160px;
  padding-bottom: 120px;
`;

 

 

 

✔️ 문제 해결

이 때는 내가 새로 적용하는 스타일이 어느 컴포넌트에 들어가야할 지 지정해주면 된다.

...props 를 통해서 Inside 컴포넌트로 스타일이 추가되도록 변경해준다.

import React from "react";
import styled from "@emotion/styled";

const Outside = styled.div`
`;

const Inside = styled.div`
`;

interface Props {
  children: React.ReactNode;
}

const PageHeader = ({ children, ...props }: Props) => {
  return (
    <Outside>
      <Inside {...props}>{children}</Inside>
    </Outside>
  );
};

export default PageHeader;

 

 

 

✔️ 다시 수정

...props 말고 className을 넣어야 한다.

interface Props {
  children?: string;
  type: "title" | "copy";
  scale: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8";
  color: string;
  className?: string;
}

const Text = ({ children, type, scale, color, className }: Props) => {
  return (
    <P className={`${type}-case${scale} ${className}`} color={color}>
      {children}
    </P>
  );
};

Text.defaultProps = {
  color: theme.colors.black,
};
export default Text;

 

https://styled-components.com/docs/basics#styling-any-component

styled-components: Basics