使用高度导出样式化的 Material-UI TextField？答案

【问题标题】：Export styled Material-UI TextField with height?使用高度导出样式化的 Material-UI TextField？
【发布时间】：2020-03-16 18:29:23
【问题描述】：

此问题似乎适用于以下文本字段：variant='outlined' .我正在尝试导出我自己的高度为 40px 的轮廓文本字段：


import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';


const MyTextField = withStyles({
    root: {
        backgroundColor: 'yellow',
        height: 40,
        margin: 0,
        paddingBottom: 0,
        marginTop: 0,
    }
})(TextField);

export default MyTextField;

我将组件用作带轮廓的文本字段，因为从样式组件中导出 variant='outlined' 似乎不起作用。

<MyTextField 
  value={"hello"}
  variant="outlined"
/>

轮廓文本字段的高度大于 40 像素，因为字段底部有额外的填充；但是背景黄色现在只有 40px。如何更改被勾勒的 TextField 的高度？

【问题讨论】：

你想保持文本大小不变，同时只改变高度吗？

标签： material-ui

【解决方案1】：

恭喜！当你隔离它时，你的代码完全按照你的意愿工作。当放入沙盒时，<TextField> 显示高度为 40px。您的应用中的其他问题导致了高度问题。

【讨论】：

我没有使用普通文本字段对此进行测试，因为我的应用程序使用“概述”文本字段。当我使用 variant="outlined" 时，就会出现问题。这似乎在文本字段的底部添加了一些填充。这就是使该领域比未概述的领域更大的原因。如何将 variant=outlned 按钮设置为特定高度？
计算出轮廓变体使用了多少填充并将 TextField 高度设置为 40 -（轮廓变体填充）。这应该够了吧。如果你使用一个标签，它可能会混淆与文本重叠的标签。