[MUI] select 요소의 border 없애기

MUI에는 select라는 요소가 있다. 클릭하면 아래로 선택 가능한 목록이 펼쳐지는 형태의 컴포넌트다.
그런데 이 요소의 border, 그러니까 기본 상태에서의 border와 활성화 되었을 때의 border 모두를 없애는 방법이 공식 문서에 구체적으로 나와 있지 않아서 stack overflow 등의 도움을 빌려야 했다. 이렇게 UI 프레임워크를 사용하면서 스타일링을 해야 하는 경우가 이전 프로젝트에서도 꽤 있었는데, 특히 border를 없애는 작업은 앞으로도 자주 활용될 것 같아 정리해 본다.

환경
- React
- Material UI

코드

    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth size='small' style={{
        backgroundColor: 'white',
        borderRadius: '4px',
      }}>
        <Controller
          name="orgType"
          control={control}
          render={({ field }) => (
            <Select
              sx={{ '.MuiOutlinedInput-notchedOutline': { border: '0', borderRadius: '4px' } }}
              {...field}
              labelId="org-select-label"
              id="org-select"
              onChange={handleOrgChange}
              value={orgType}
              renderValue={(selected) => {
                if (selected.length === 0) {
                  return <em>구분</em>;
              }
              return orgType;}}
            >
              <MenuItem value={"GE01"}>유치원</MenuItem>
              <MenuItem value={"GE05"}>대학교</MenuItem>
              <MenuItem value={"GE99"}>기타</MenuItem>
            </Select>
          )}
        />
      </FormControl>
    </Box>