TIL35, 오늘 마주친 버그

오늘 마주친 버그들 로그.

prod 와 dev 의 결과물이 다르게 나온다.

<LinearProgress
  ref={progressRef}
  classes={{ root: classes.root, bar: classes.bar }}
  variant="determinate"
  value={progress}
/>

머테리얼 유아이에서 Linear Progress Bar를 사용하면서, 커스텀 스타일링을 적용하기 위해 위와 같이 코드를 작성하였다. 로컬 작업환경에서 의도한대로 스타일링이 부여되는 것을 확인한 뒤, 배포를 하였다. 그런데 왠걸, 실제 product에서는 내가 의도한 것과는 다르게 스타일링이 부여되는 것을 확인하였다.

좀 더 정확한 진단을 위해서, 개발자 도구에서 스타일링을 비교해 보았다.

원래는 위와 같이 나와야 하나,

이상하게도, 내가 부여한 스타일링인 jss22 의 스타일링이 우선순위에서 뒤로 밀려졌고, 기본 스타일링인 MuiLinearProgress-root 이 우선순위에서 앞섰다. 이것 때문에, 내가 의도한 스타일링이 나오지 않았다. 동일한 코드 였지만, 모종의 이유로 인해 dev 서버와 product 서버에서 결과 값이 다르게 나온 것이 원인이었다.

material-ui의 issue를 찾아보니, 나뿐만이 아닌, 다른 사람들 또한 동일한 문제를 겪고 있었다.

정확한 솔루션은 찾을 수 없었다.

다만 추측하기로, 나는 material ui styling solution 을 통해서 ui 컴포넌트들을 스타일링 하고 있었는데, 해당 방법에 문제가 있는 것 일수도 있겠다 싶어, 스타일링을 하는 방법을 바꾸어 주었다. material ui 컴포넌트를 wrapper로 감싼 뒤, 해당 wrapper에 ui 컴포넌트 클래스네임을 nesting 하여 스타일을 부여해 주었다.

해당 코드는 아래와 같다.

const ProgressContainer = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  .MuiLinearProgress-root {
    width: 60%;
    height: 50px;
    background-color: #f1f1f6;
    border-radius: 20px;

    .MuiLinearProgress-bar {
	  background-color: #7ac4bf;
    }
  }
`;

위와 같이 내가 의도한 스타일이 잘 나타나는 것을 확인.