Styled Component__[props 조회하기]
5744 단어 styled componentTILTIL
On.
Styled Component
1) Props 조회
- styled.div옆의 <>은 타입 명시이기 때문에 써주면 좋지만, 안써줘도 props 조회가 가능하다.
const Image = styled.div<{ src: string }>`
background: url(${(props) => props.src});
`;
const Product: React.FC<Props> = ({ product }) => {
return (
...
<Image src={product.productImg} />
...
);
};
2) basic element에 style 주입
- 아래의 코드에서 여러개의 Product 컴포넌트를 감싸는 div는 ProductList로 명명하는 것이 적절할 것이다.
- 하지만 ProductList는 이미 해당 함수형 컴포넌트에서 사용중이다.
- styled component를 사용하여 최상위 div의 style을 적용하고 싶은데 어떻게 해야할까?
- 아래와 같이 export 아래에 styled component식으로 선언해 주고, passProps를 이용하여 div에 스타일을 적용한다!
const ProductList: React.FC<Props> = (props) => {
const { ...passProps } = props;
return (
<div {...passProps}>
{productList?.map((item) => (
<Product product={item}></Product>
))}
</div>
);
};
export default styled(ProductList)`
...
`;
`
Off.
프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥
Author And Source
이 문제에 관하여(Styled Component__[props 조회하기]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hongin/Styled-Componentprops-조회하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1) Props 조회
- styled.div옆의 <>은 타입 명시이기 때문에 써주면 좋지만, 안써줘도 props 조회가 가능하다.
const Image = styled.div<{ src: string }>`
background: url(${(props) => props.src});
`;
const Product: React.FC<Props> = ({ product }) => {
return (
...
<Image src={product.productImg} />
...
);
};
2) basic element에 style 주입
- 아래의 코드에서 여러개의 Product 컴포넌트를 감싸는 div는 ProductList로 명명하는 것이 적절할 것이다.
- 하지만 ProductList는 이미 해당 함수형 컴포넌트에서 사용중이다.
- styled component를 사용하여 최상위 div의 style을 적용하고 싶은데 어떻게 해야할까?
- 아래와 같이 export 아래에 styled component식으로 선언해 주고, passProps를 이용하여 div에 스타일을 적용한다!
const ProductList: React.FC<Props> = (props) => {
const { ...passProps } = props;
return (
<div {...passProps}>
{productList?.map((item) => (
<Product product={item}></Product>
))}
</div>
);
};
export default styled(ProductList)`
...
`;
`
프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥
Author And Source
이 문제에 관하여(Styled Component__[props 조회하기]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongin/Styled-Componentprops-조회하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)