TIL 2018-10-15

오늘 배운 것

---

• memorybook
• dep
• ref

memorybook

• styled-components 와 typescript 사용법

여기에 타입스크립트에서 styled-components 사용법 예제를 적어 놓았는데, 예제조차 잘 실행이 안 되는 게 있다. ThemedStyledComponentModule을 사용하여 아래 코드를 작성하면 에러가 뜬다.

const Title6 =
  styled <{ isActive: boolean }>Head`
  color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.fontColor)}
`;

이 외에도 다른 예제들도 전부 안 그려지고 무한 로딩이 되길래 예제 문제인가 했더니 알고보니 컴포넌트 순환 렌더링때문이었다.

• styled-components typescript attrs 사용법

정확히 어떻게 쓰는건지 잘 모르겠지만 일단 냅둬도 상관 없을 듯 하다. 아래는 끄적인 것 & 예시들.

interface Inputs {
  type?: string; // or we can define dynamic ones
}

interface Inputs2 {
  margin?: string | number;
  padding?: string | number;
}

const Ip2 = styled.input<Inputs>`
  color: ${props=> props.theme.primaryColor};
`;

const AttrsInput = styled.input.attrs({
  // we can define static props
  type: 'password',

  // or we can define dynamic ones
  margin: (props: any) => (props.size as string) || '1em',
  padding: (props: any) => (props.size as string) || '1em',
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  /* here we use the dynamically computed props */
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;

dep

ref

• https://www.styled-components.com/docs/api#typescript

---