Mui textfield, select 라벨 여부에 따른 조건부 스타일링 적용

서론

사내 UI 라이브러리로 Mui를 사용하고 있는데 디자인 시스템에 따른 컴포넌트 스타일링 작업을 theme 자체를 커스텀하여 사용중이다. theme을 커스터마이즈해서 패키지로 분리하여 패키지에서 정의해둔 theme을 가져오면 어느 워크스페이스 프로젝트에서든 디자인이 한번에 적용되게 하여 유지보수를 하고있다. 즉 theme에 디자인 작업을 해두면 레포 내부의 모든 워크스페이스에서 다른 개발자들도 스타일링이 입혀진 컴포넌트를 바로 가져다가 쓸 수 있다.

그런데 이번에 Select 컴포넌트를 커스텀하는데 넘나 삽질을 하였다... 

라벨 여부에 따라 padding 간격을 조정해야했는데, Textfield 컴포넌트와는 다르게 직접적으로 label 프로퍼티를 가져올 수 없어 애를 먹었다. 그래서 기록해봄!

 

Textfield

먼저 Mui의 텍스트필드의 경우 내부적으로 `FormControl`, `InputLabel`, `Input`, `FormHelperText` 등을 추상화시킨 컴포넌트이다.  

 

Textfield 컴포넌트 사용

  <ThemeProvider theme={theme}>
      <TextField
        label='Label'
        value={textfieldVal}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setTextfieldVal(e.target.value)
        }
      />
  </ThemeProvider>

 

theme에서 Textfield 커스텀하기

const theme = createTheme({
  components: {
    MuiTextField: {
      root: ({ ownerState }) => ({
        ...(ownerState.variant === 'filled' && {
          '.MuiInputBase-input': {
            paddingLeft: '1rem',
            ...(ownerState.label
              ? {
                  paddingTop: '1.5rem',
                  paddingBottom: '0.5rem',
                }
              : {
                  padding: '1rem',
                }),
            ...{
              paddingRight: ownerState.InputProps?.endAdornment ? 0 : '1rem',
            },
          },
        }),
      }),
    },
  },
});

 

https://mui.com/material-ui/customization/theme-components/ 공식문서 대로 기존에 적용된 스타일링을 오버라이딩 하여 새로 스타일링을 적용시킨다. 텍스트필드의 경우 `ownerState` prop에 `label`이 존재하여, 라벨 존재 여부를 바로 판단하여 쉽게 스타일링할 수 있었다.

텍스트필드 맨 오른쪽에 넣는 클리어 버튼 여부도 마찬가지로 `InputProps`의 `endAdornment` prop으로 쉽게 판단 가능하여 적용 가능했다. 

 

Select

Select 컴포넌트 사용

  <ThemeProvider theme={theme}>
      <FormControl> 
        <InputLabel>Label</InputLabel> //<- 라벨 넣는 코드. 제거하면 라벨 없음 
        <Select
          value={selectVal}
          onChange={(event) => setSelectVal(event.target.value)}
          variant="filled"
        >
          <MenuItem value={1}>1</MenuItem>
          <MenuItem value={2}>2</MenuItem>
          <MenuItem value={3}>3</MenuItem>
        </Select>
      </FormControl>
    </ThemeProvider>

 

theme에서 Select 커스텀하기

Select도 위의 Textfield와 비슷하게 `root` slot을 가지고 커스텀 가능하겠거니 했는데, select 에서 styleOverrides 가능한 slot에는 root가 없었다. 

 

 

MuiSelect를 타고 가서 타입을 열어보니 위의 클래스에 해당하는 애들만 스타일링 오버라이딩이 가능하다.

그리고 ownerState prop으로 label을 가져올 수도 없었다. 

따라서 결국엔 Select 를 사용할때 상위에 감싸는 FormControl을 제어해야 했다. 

 

MuiSelect 구조 파악하기

라벨이 있는 셀렉트를 콘솔에서 확인해보면 이런 구조가 나왔다. 

 

위의 dom 구조를 보기 쉽게 구조화하면 아래와 같을 것이다.

라벨이 없을때는 `MuiInputLabel-root` 라는 클래스 요소가 없는 것이니, 우선 라벨이 없을때 기본 패딩값을 적용해주고, 선택자로 라벨이 있을때를 골라 라벨이 있는 경우의 패딩을 적용해준다. 

 

const theme = createTheme({
  components: {
    MuiFormControl: {
      styleOverrides: {
        root: {
          '& .MuiInputLabel-root + .MuiInputBase-root': { //셀렉트 라벨있을때 패딩
            '.MuiSelect-select': {
              paddingTop: '1.5rem',
              paddingBottom: '0.5rem',
            },
          },
      	  '& .MuiSelect-select': { //라벨 없을때
            padding: '1rem',
          },
        },
      },
    },
  },
});

 

 

 '& .MuiInputLabel-root + .MuiInputBase-root' 해석하기 

 

여기서 헷갈리던 부분이 있었는데, &의 띄어쓰기에 따른 요소 선택이다. & 뒤에 띄어쓰기를 붙이면 뭐가 다를까?

• `&.className:`  &인 현재 요소에 직접 적용된다.
• `& .className:` &의 자식 요소를 선택한다.

 

현재 선택한 기준이 되는 컴포넌트인 `MuiFormControl`에서 자식요소인 `MuiInputLabel-root`를 선택하고, mui에서 Textfield, Input, Select의 기본 베이스가 되는 컴포넌트인 `MuiInputBase-root` 도 선택하여 (인접한 형제이므로 + 로 연결) 라벨이 존재하는지 파악할 수가 있게 된다. 

즉 동일한 부모 요소 내에서 `MuiInputLabel-root` 클래스를 가진 요소 바로 뒤에 `MuiInputBase-root` 요소가 바로 뒤따라오면? 라벨이 있다는 거니까 해당 요소에 정의된 스타일을 적용하는 것이다.

FormControl 내에 InputLabel이 존재하는지에 따라 조건부로 스타일을 적용할 수 있는 것!

 

위에서 라벨 없을때 선택자로 적어준 '& .MuiSelect-select' 부분은 아래 코드처럼 직접 MuiSelect 컴포넌트를 가지고도 제어할 수도 있다. 

      MuiSelect: {
      styleOverrides: {
        select: {
          padding: '1rem', //셀렉트 라벨없을때 기본 패딩
        },
      },
    },

 

 

 

끝