개발하는데 다 이유가 있겠지

TextField

---

<TextField> 컴포넌트는 Material UI의 다른 컴포넌트인 <InputLabel>, <Input>, <FormHelperText> 등으로 구성되어 있는 고수준 컴포넌트이다.
<TextField>를 사용하면, 여러 개의 하위 컴포넌트를 사용하는 효과를 얻을 수 있다.

 

형태

---

<TextField>는 standard, filled, outlined 총 3가지의 형태로 제공된다.

TextField의 3가지 형태

standard : 배경색 X, 테두리 X, 밑줄만 표시
filled : 배경색 O, 테두리 X
outlined : 배경색 X, 테두리 O

import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Standard" />
    <TextField label="Filled" variant="filled" />
    <TextField label="Outlined" variant="outlined" />
  </>
);

 

상태

---

<TextField>는 required나 disabled와 같은 <input> 엘리먼트 기본 속성뿐만 아니라, error와 같은 추가적인 상태도 지원한다.
'error' prop을 사용할 때, 'helperText' prop도 같이 사용하면 효과적으로 유효하지 않은 입력값에 대해 피드백을 줄 수 있다.

import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Required" required />
    <TextField label="Disabled" disabled />
    <TextField label="Error" error helperText="Invalid input." />
  </>
);

 

Textarea / Selectbox

---

여러 줄의 입력을 받을 수 있는 <textarea>는 'multiple' prop을 사용하면 된다.

import { TextField } from "@material-ui/core";

export default () => (
  <TextField
    label="내용"
    multiline
    rows={3}
    defaultValue="내용을 입력해주세요."
  />
);

여러 개의 옵션 중 하나를 선택받을 수 있는 <select>는 'select' prop을 사용하면 된다.

import { TextField, MenuItem } from "@material-ui/core";

export default () => (
  <TextField select label="Size" variant="outlined">
    <MenuItem>Small</MenuItem>
    <MenuItem>Medium</MenuItem>
    <MenuItem>Large</MenuItem>
  </TextField>
);

 

아이콘 삽입

---

<InputAdornment> 컴포넌트를 사용하면 <TextField> 앞뒤에 아이콘을 삽입할 수 있다.

import { TextField, InputAdornment } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";

export default () => (
  <>
    <TextField
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />
    <TextField
      variant="outlined"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />
  </>
);

 

색상 및 크기

---

색상은 'color' prop을 이용해서 조절할 수 있다.

import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Primary" variant="filled" />
    <TextField label="Secondary" variant="filled" color="secondary" />
  </>
);

크기는 'size' prop을 이용해서 조절할 수 있다.

import { TextField } from "@material-ui/core";

export default () => (
  <>
    <TextField label="Medium" variant="outlined" />
    <TextField label="Small" variant="outlined" size="small" />
  </>
);

 

 

[출처]
https://www.daleseo.com/?tag=MaterialUI