[React][TypeScript][MUI] MUI TextField의 스타일을 변경해보자(feat: endAdorment)

MUI TextField를 사용하여 React TypeScript 애플리케이션을 개발할 때, 글꼴 크기, 높이 및 길이와 같이 스타일을 변경하려면 몇 가지 방법이 있다. 나는 3번의 방법을 사용하는데 상황에 맞게 쓰면 될 것 같다.

1. MUI 테마 설정을 변경하여 스타일 변경

MUI 테마를 사용하여 글꼴 크기, 높이 및 길이를 변경할 수 있습니다. 테마를 사용하면 MUI 구성 요소의 다양한 스타일을 한 번에 변경할 수 있습니다.

예를 들어, 다음 코드는 MUI TextField의 글꼴 크기, 높이 및 길이를 변경하는 방법이다.

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      root: {
        fontSize: '20px',
        height: '60px',
        width: '400px',
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="Name" />
    </ThemeProvider>
  );
}

이 예제에서는 createMuiTheme()을 사용하여 overrides 속성을 설정하는데 overrides 속성은 특정 MUI 구성 요소의 스타일을 변경하는 데 사용된다. 여기에서는 MuiInputBase 구성 요소의 스타일을 변경하고 있고 MuiInputBase 구성 요소는 MUI TextField 구성 요소의 기본 입력 요소를 나타낸다

2. CSS 스타일링을 사용하여 스타일 변경

CSS를 사용하여 MUI TextField의 글꼴 크기, 높이 및 길이를 변경할 수도 있다.

import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    '& .MuiInputBase-input': {
      fontSize: '20px',
      height: '60px',
      width: '400px',
    },
  },
});

export default function App() {
  const classes = useStyles();
  return (
    <TextField
      label="Name"
      variant="outlined"
      className={classes.root}
    />
  );
}

3. 속성값을 사용하여 스타일 변경

MUI TextField는 InputProps 속성을 통해 입력 요소에 스타일을 적용할 수 있습니다. 이 방법은 특히 특정 TextField에만 스타일을 적용하려는 경우에 유용하다.

import TextField, { InputProps } from '@material-ui/core/TextField';

const inputProps: InputProps = {
    style: {
      fontSize: lightTheme.body.fontNormal,
      height: "48px",
      marginTop: "12px",
    },
    endAdornment: (
      <InputAdornment position="end">
        <span>MAX</span>
      </InputAdornment>
    ),
  };

export default function App() {
  return (
    <TextField label="Name" InputProps={inputProps} />
  );
}