RN - styled-component 내부에 css 변수를 적용하는 방법

styled-components 내부 속성에 css 변수 적용하기

const ShellButton = styled.button<ButtonStyles>`
  background-color: ${({ theme }) => theme.btnColor};
  color: ${({ theme }) => theme.btnTxtColor};
  border: none;
  border-radius: 10px;
  cursor: pointer;
  &:hover {
    opacity: var(--atomshell-hover-opacity);
  }

  ${({ color }) => color && getButtonColor(color)}
  ${({ size }) => size && getButtonSize(size)}
`;

버튼 컴포넌트를 작성하였고 hover시 0.7정도의 투명도를 지정하였다.
하지만 이부분이 추후 변경될수도 있고, 공통적으로 사용하기 위해 GlobalStyle쪽에서 변수화를 해두었는데, ts에서 오류가 발생하고 있었다.

'--atomshell-hover-opacity' 사용자 지정 프로퍼티를 확인할 수 없습니다

아래처럼 hover부분을 수정하고 해결하였다.

  &:hover {
    opacity: ${'var(--atomshell-hover-opacity)'};
  }