reactjs - 如何在材料 ui 中显示比文本字段宽度更长的文本？

Question

目前我正在使用 ReactJs/Material UI 开发移动企业网络，我有疑问 How to show the user a character long than the limited width TextField。

当然，用户可以通过触摸文本字段并移动光标来查看所有字符，但我需要一个更有效的方法。

以下是我提出的想法。

1. 动画效果？（TextField未触摸时，前后移动使整个文字可见的效果）
2. 当用户触摸文本字段时显示multiline文本字段。multiline（整个文本长度的动态）

任何的想法？

标签： reactjsmaterial-ui

Answer 1

我会保持简单：

• 对于长文本（内容、描述...）：我将其设置为multiline

• 对于短文本（电子邮件、密码...），我将fullWidth在移动设备上进行设置。

没有必要过度思考。查看您所知道的最流行网站的表格，您是否看到除fullWidthor之外的其他内容multiline？

但是，如果您将其设置为TextField，则可以通过在 css 中multiline设置来使其在没有足够空间显示长文本时自动调整大小。resize: both默认值为none（禁用）。

const useStyles = makeStyles({
  textarea: {
    resize: "both"
  }
});

<TextField
  label="MUI Text Area"
  multiline
  inputProps={{ className: classes.textarea }}
/>

你也可以使用TextareaAutosize，但它很糟糕，看起来一点也不像开箱即用的 MUI 组件，所以不要使用它。

现场演示