import React from 'react';
import styled, { css } from 'styled-components';
const Circle = styled.div`
width: 5rem;
height: 5rem;
background: ${props => props.color || 'black'};
border-radius: 50%;
${props =>
props.huge &&
css`
width: 10rem;
height: 10rem;
`}
`;
function App() {
return <Circle color="red" huge />;
}
export default App;
문서를 참조하여npm install @types/styled-components
설치 후,
import {} from "styled-components/cssprop"
를 하려했으나 여전히 되지 않음.
스택오버플로우를 참조해서 import * as types from "styled-components/cssprop"
으로 수정
import React from "react";
import styled from "styled-components";
import * as types from "styled-components/cssprop";
const Circle = styled.div<{ huge: boolean }>`
width: 5rem;
height: 5rem;
background: ${(props) => props.color || "black"};
border-radius: 50%;
${(props) =>
props.huge &&
`
width: 10rem;
height: 10rem;
`}
`;
function App() {
return <Circle color="red" huge />;
}
export default App;
styled.div에 타입을 명시해줘야 한다!
'프론트엔드 > ReactJS' 카테고리의 다른 글
useEffect와 생명주기 (1) - 클래스형 컴포넌트의 State와 Lifecycle (1) | 2021.12.15 |
---|---|
useEffect와 생명주기 (0) - 주절주절 (0) | 2021.12.15 |
Redux vs. React Context (2) - 왜 Context는 "상태 관리"가 아닌가 (0) | 2021.12.13 |
Redux vs. React Context (1) - Context와 Redux에 대한 이해 (0) | 2021.12.12 |
Redux vs. React Context (0) - Introduction (0) | 2021.12.08 |