JSX 문법 안쪽에는 class 속성을 사용할 수 없고, 대신해서 className을 사용할 수 있다.

위에서는 class명을 box라고 넣어주었다.
이후에는 별 다를 것 없이 css 파일을 만들어 해당 class에게 속성을 추가해주면 된다.

따로 css파일을 만들어주었는데, 이제 이 둘을 연결하게 만들어주자.

* css파일 js파일과 연결하기

js파일로 돌아가서 import "경로"로 불러오기를 해준다.

그리고나서 확인하면 잘 적용되어 있는 모습을 볼 수 있다.

자식 엘리먼트 속성

box에 자식으로 child_box라는 이름으로 만들어주고,

    <div>
      <div className="box">
        <div className="child_box"></div>
      </div>
    </div>

css로 넘어와서 속성을 넣어주면

.child_box {
  width: 100px;
  height: 100px;
  background-color: salmon;
}

당연하지만 위처럼 잘 들어간다.

윗부분의 내용은 너무 당연하다면 당연한 html/css에 관련된 이야기였는데, 이제 styled component를 사용해보고자 한다.

Styled component

* style 적용하는 방법

아까는 className을 사용한 class명으로 css에 속성을 넣어줬는데, 이번에는 짓고자하는 이름의 component명으로 만들어준 뒤, 상단에 styled component를 import해준다.

다음으로, 방금 만든 component에 styled를 사용할 것이다.

빨간 박스 안의 코드에서 styled component를 사용한 css 속성을 넣어줄 수 있다.
div가 적힌 곳은 사용하고자 하는 태그를 넣어줘도 무방하다.
ex) const Box = styled.li``;
그럼 본격적으로, css가 적용되는 곳은 백틱``내부이다. 아까와 동일하게 css 속성을 줘보았다.

그러고 확인해보면, 아까와 똑같은 결과를 확인할 수 있다.

*style components에서 props사용

위 이미지처럼 props를 사용하면 간단하게 속성값을 줄 수 있다.