[React] tailwind 사용시에 emotion으로 스크롤바 커스텀하기

스크롤바를 커스텀 해보자...

 

css로 가능한데, 리액트에서 테일윈드를 사용하기에, 적용할 방법이 없었으나

emotion을 이용해 적용가능!

 

import { css } from "@emotion/react";
.
.
.
<div
            css={css`
              ::-webkit-scrollbar {
                width: 8px;
              }
              ::-webkit-scrollbar-track {
                background-color: transparent;
              }
              ::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.3);
                border-radius: 6px;
              }
              ::-webkit-scrollbar-thumb:hover {
                background-color: rgba(0, 0, 0, 0.5);
              }
            `}
            className="w-full overflow-y-auto h-full p-3"
         >

 

다른 css는 className에서 tailwind로도 가능하지만 스크롤바 커스텀은 안되어서 어쩔수없이 emotion과 혼용사용 하였다.