[Styled Component] 적용안되는경우1

기본

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