Как установить ширину для компонента TextAreaAutoSize в Material-UI? - PullRequest
Новая
       69

Как установить ширину для компонента TextAreaAutoSize в Material-UI?

1 голос
/ 19 июня 2020

Я нигде не могу найти никакой информации о том, как изменить ширину по умолчанию для компонента TextAreaAutosize в material-ui.

Кажется, единственный выбор - иметь эту маленькую коробочку. Кто-нибудь знает о лучшем компоненте автоматического размера текстовой области, который я могу использовать, или о том, как изменить ширину компонента TextAreaAutoSize?

API не показывает никаких свойств, которые имеют какое-либо отношение к 'className'. Я все равно попытался использовать его, но его проигнорировали. Я также попытался обернуть компонент в Box и стилизовать его, но TextArea проигнорировал его.

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Изменение размера пользователем отключено (через resize: "none") для TextField здесь, в InputBase: https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/InputBase/InputBase.js#L140.

Ниже приведен пример того, как включить он снова включен: 

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1)
    }
  },
  textarea: {
    resize: "both"
  }
}));

export default function MultilineTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          id="outlined-textarea"
          label="Multiline Placeholder"
          placeholder="Placeholder"
          multiline
          variant="outlined"
          inputProps={{ className: classes.textarea }}
        />
      </div>
    </form>
  );
}

Edit TextField resizable

CSS documentation for resize: https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Демонстрации многострочного текстового поля: https://material-ui.com/components/text-fields/#multiline

0 голосов
/ 20 июня 2020

Мне удалось заставить его работать благодаря Райану Когсвеллу. Глупый я, хотя я завернул текстовое поле в поле и применил className к полю (что не сработало), я должен был применить его непосредственно к textareaautosize.

В VSCODE Intellisense есть ошибка, где он показывает 'классы' как свойство, но не 'className', поэтому я предположил, что его не существует.

Вот код: 

const FormStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  button: {
    marginTop: '20px',
    marginRight: theme.spacing(1),
  },
  buttons: {
    display: 'flex',
    justifyContent: 'flex-end'
  },
  textarea: {
    width: '100%',
  },
}));

  <TextareaAutosize
    rowsMin={3}
    aria-label={info.label}
    name={info.name}
    placeholder=''
    defaultValue=''
    className={classes.textarea}
    />

Мне не удалось отобразить значок перетаскивания в текстовое поле, поэтому не использовал его. Но я был бы признателен за пример текстового поля с использованием многострочности и изменения размера.

Спасибо, Райан!

...