0
530
VistasÁrea de texto en material-ui
¿Alguien podría ayudarme a convertir una personalización de TextField en un TextArea, usando la biblioteca material-ui? No encuentro ningún parámetro que deba personalizarlo en un TextArea: https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts
Este es el área de texto: https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F 'Área de texto').
Las áreas de texto son más altas que los campos de texto y envuelven el texto desbordado en una nueva línea. Se desplazan verticalmente cuando el cursor llega al final del campo.
3 Respuestas
Responde la pregunta0
Para hacer que TextField funcione como un área de textarea , puede usar accesorios multiline . Puede leer más sobre TextFied y sus props aquí .
Ejemplo
<TextField placeholder="MultiLine with rows: 2 and rowsMax: 4" multiline rows={2} maxRows={4} /> Puede configurar maxRows={Infinity} si desea escalar su cuadro de entrada de varias líneas con su contenido (independientemente de la longitud del contenido).
0
Podemos usar <TextField> multilínea delineado para el área de texto
y podría implementarse creando un tema para aplicar globalmente en cualquier lugar dentro de <App/>
tema.js
import { createMuiTheme} from '@material-ui/core/styles'; const theme = createMuiTheme({ overrides: { MuiOutlinedInput: { multiline: { fontWeight: 'bold', fontSize: '20px', color: 'purple', width: '50vw' } } } }); export default theme;aplicación.js
... 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> ); }AlgúnComponente.js
... <TextField id="outlined-multiline-static" label="Multiline" multiline rows={10} variant="outlined" /> ... Ahora el estilo para <TextField> multilínea delineado se aplicará globalmente 
0
Debe usar la API TextareaAutosize disponible en la interfaz de usuario del material.
import TextareaAutosize from '@material-ui/core/TextareaAutosize';o
import { TextareaAutosize } from '@material-ui/core';El siguiente ejemplo tiene todos los atributos de TextareaAutosize: https://material-ui.com/components/textarea-autosize/
Puede obtener más información sobre la diferencia entre las dos importaciones leyendo esta guía .