리액트/라이브러리
[Styled Component] 적용안되는경우1
임고미
2021. 11. 29. 20:35
728x90
300x250
기본
1. import 안한경우
2. import 하고 component 만들어줬는데, 잘못만들어준경우
//x
const styledComponent = styled.div``;
//o
const StyledComponent = styled.div``;
이 또한 컴포넌트를 만드는것이므로, 대문자로 시작해줘야합니다.
3. 컴포넌트에 styled를 적용하고 싶은데 잘못한 경우
//x
const StyledComponent = styled.Component``;
//o
const StyledComponent = styled(Component)``;
컴포넌트는, 일반 태그들과 달리 () 괄호로 묶어줘야합니다.
4. 위와같이 잘했는데도 안되는경우
이 상황을 겪고 이 포스팅을 하게 되었는데 해결은 하였지만 모든 원인을 이해하고 해결한게 아니라 해결방법 뒤에 앞으로 풀어야할 숙제가 있습니다.
여러번의 여러뎁스로 묶인 컴포넌트의 스타일을 커스텀해주기위해 작업하던 중에 확인한 버그입니다.
styled로 잘 묶어줬고, 사용방법도 틀리지 않았고 에러도 안나는데 스타일이 그냥 적용이 안되는 상황을 확인했습니다.
해결 : className을 props으로 넘겨주면 해결 할 수 있엇습니다.
const childComponent = ({className, children}) => {
return <div className={className}>{children}</div>
}
const parent = () => {
return <childComponent> 이게 되네!! </childComponent>
}
앞으로 풀어야 할 문제
전제 : Typescript 사용
1. cildComponent의 interface를 HTMLAttribute<HTMLDivElement>로 확장을 해주었고, 해당 값을 ...rest로 풀어주면, className은 DivElement의 값이므로 자연스럽게 들어가서 문제가 해결될거라 생각했는데 제대로 작동하지 않았습니다.
interface ChildComponentProps extends HTMLAttribute<HTMLDivElement> {
children: JSX.Element | JSX.Element[];
}
const childComponent = (props: ChildComponentProps) => {
const {children, ...rest} = props;
return <div {...rest}>{children}</div>
}
2.
interface ChildComponentProps extends HTMLAttribute<HTMLDivElement> {
children: JSX.Element | JSX.Element[];
className?: stirng;
}
const childComponent = (props: ChildComponentProps) => {
const {children,className,...rest} = props;
return <div className={className} {...rest}>{children}</div>
}
위와같이 직접적으로 넣어주면 작동합니다.
앞으로 해결해야할 숙제입니다!!
참고:
https://stackoverflow.com/questions/54113367/extending-styles-with-styled-components-not-working
728x90
300x250