문자 영역(material-ui)

문자 영역(material-ui)

material-ui 라이브러리를 사용하여 TextField 개인 설정을 TextArea로 만드는 데 도움을 주실 수 있습니까?TextArea:https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts에 커스터마이즈할 파라미터를 찾을 수 없습니다.

이것은 TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F '텍스트 영역')입니다.

텍스트 영역은 텍스트 필드보다 높으며 오버플로우 텍스트를 새 줄로 래핑합니다.커서가 필드 맨 아래에 도달하면 수직으로 스크롤됩니다.

만들기 위해서TextField열심히 일하다textarea사용할 수 있습니다.multiline소품. 자세한 내용은TextFied및 그props 여기 있습니다.

예

<TextField
  placeholder="MultiLine with rows: 2 and rowsMax: 4"
  multiline
  rows={2}
  maxRows={4}
/>

설정할 수 있습니다.maxRows={Infinity}컨텐츠 길이에 관계없이 컨텐츠에 따라 여러 줄 입력 상자의 크기를 조정하려는 경우.

아웃라인된 멀티라인을 사용할 수 있습니다.<TextField>텍스트 영역용
또한 내부 어디에나 글로벌하게 적용할 수 있는 테마를 만들어 구현할 수 있습니다.<App/>

teme.displays(테마.태스크린

import { createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
 overrides: {
    MuiOutlinedInput: {
        multiline: {
            fontWeight: 'bold',
            fontSize: '20px',
            color: 'purple',
            width: '50vw'
        }
    }
}
  
});
export default theme;

app.module

...
import { ThemeProvider } from '@material-ui/core/styles';
import Theme from './relevant-path-where-the-above-theme.js-file-is-saved/Theme';
...
...
render() {
    
    return (
      <ThemeProvider theme={Theme}>
        <div className="App"> 
            <Routes/>
        </div>
      </ThemeProvider>
        
    );
  }

Some Component.js

...
<TextField
  id="outlined-multiline-static"
  label="Multiline"
  multiline
  rows={10}
  variant="outlined"
/>
...

이제 윤곽이 잡힌 여러 줄의 스타일<TextField>글로벌하게 적용되다

를 사용해 주세요.TextareaAutosizeAPI를 머티리얼 UI에서 사용할 수 있습니다.

import TextareaAutosize from '@material-ui/core/TextareaAutosize';

또는

import { TextareaAutosize } from '@material-ui/core';

다음 예제에서는 Textarea의 모든 Atribute를 사용하고 있습니다.자동 크기: https://material-ui.com/components/textarea-autosize/

이 안내서를 읽고 두 가져오기 간의 차이점에 대해 자세히 알아볼 수 있습니다.

material-ui 컴포넌트 전체가 아닌 간단한 것을 원하는 경우 다음 코드를 사용하십시오.

textarea.style.height = textarea.scrollHeight+'px'

어디에scrollHeight텍스트 영역의 내부 높이입니다.style.heightis outer (외부 < inner, 스크롤바가 표시되어 있는 경우)

언급URL : https://stackoverflow.com/questions/46393703/text-area-in-material-ui