MUI Step UI Custom example

NextJS 에서 정말 유용하게 사용가능한 UI 라이브러리인 MUI 에서 제공하는 Step UI의 css 를 커스텀 해서 사용하는 방법이다

https://mui.com/material-ui/react-stepper/

 

<Stepper
    activeStep={1)}
    alternativeLabel
    sx={{
      '& .MuiStepLabel-root .Mui-active': {
        color: '#1890FF',
      },
      '& .MuiStepLabel-root .Mui-completed': {
        color: '#1890FF',
      },
      '& .MuiStepLabel-root .MuiStepIcon-root': {
        width: '40px',
        height: '40px',
      },
      '& .MuiStepConnector-line': {
        marginTop: '10px',
        height: '2px',
      },
    }}
  >