MUI의 모바일에서의 버튼 이벤트

KHW·2021년 12월 22일
0

라이브러리

목록 보기
4/4
post-custom-banner

MUI button

해당 버튼은 onClick으로 하면 모바일에서 onTouch로 하는 부분의 처리를 진행 할 수 없다.

해결방법

const Tag = styled(Chip)`
  background-color: ${(props) => !props.checked && "#E8E8E8"};
  color: white;
`;
....


 <button
      onClick={onClick}
      style={{
        background: "none",
        border: "none",
      }}
    >
      <Tag
        label={text}
        color="primary"
        checked={checked}
        style={{ height: "20px", fontSize: "14px" }}
      />
    </button>

전체를 투명하고 크기가 없는 button으로 묶어주어 해당 이벤트를 기본의 button에서 onClick으로 수행시키면 기본의 onClick이 모바일에서의 onTouch 또한 지원해준다.

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자
post-custom-banner

0개의 댓글