리액트, 타입스크립트 - 버튼에 hover 및 disabled

  /* 호버 기능을 추가했습니다.  */
  &:hover {
    cursor: pointer;
    background: ${(props) =>
      props.backgroundColor
        ? (props: any) => props.theme.colors[`${props.backgroundColor}`]
        : (props) =>
            props.theme.colors
              .mono0}; // 왼쪽의 props.theme.colors.[mono0]에서 원하는 색상을 넣으시면 됩니다.

    color: ${(props) =>
      props.color
        ? (props) => props.color
        : (props) =>
            props.theme.colors
              .white100}; // 왼쪽의 props.theme.colors.[white100]에서 원하는 색상을 넣으시면 됩니다.
  }
  &:disabled {
    color: ${(props) =>
      props.color
        ? (props) => props.color
        : (props) => props.theme.colors.black100};
    background: ${(props) =>
      props.backgroundColor
        ? (props: any) => props.theme.colors[`${props.backgroundColor}`]
        : (props) => props.theme.colors.white30};
    cursor: not-allowed;
    opacity: 0.5;
  }
`;

<CustomInput disalbed={true}/
  이렇게 설정을 해주면 disabled 시 효과를 줄 수 있음