Material-UI的TextField多行区域中的输入文本重叠答案

【问题标题】：Input text overlapping in TextField multiline area of Material-UIMaterial-UI的TextField多行区域中的输入文本重叠
【发布时间】：2020-03-09 09:40:57
【问题描述】：

Material-UI 多行文本字段中的输入文本相互重叠（不是标签）。
请参阅 CodeSandBox 中的示例和代码：https://codesandbox.io/s/keen-wu-yquk6

我怀疑这可能与我将 Font-Sized 增加到 30 的事实有关，但 line-height（或其他东西）仍然为默认大小字体配置。

示例截图：

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

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 350
  }
}));

const StyledTextField = styled(TextField)`
  .MuiInput-underline::before {
    border-bottom-color: white;
  }
  .MuiInput-underline:hover:not(.Mui-disabled)::before {
    border-bottom-color: white;
  }
  .MuiInput-underline::after {
    border-bottom-color: #fdcd39;
  }
`;

const StyledTextArea1 = ({ Label, fieldType, handleChange }) => {
  const classes = useStyles();

  return (
    <StyledTextField
      id="standard-basic"
      className={classes.textField}
      label="Test Label"
      multiline
      fullWidth
      rows="5"
      variant="outlined"
      margin="normal"
      // onChange={handleChange(fieldType)}
      InputLabelProps={{
        style: {
          color: "black",
          fontSize: 30,
          borderBottom: "white",
          fontFamily: "Akrobat"
        }
      }}
      inputProps={{
        style: {
          fontSize: 30,
          color: "#fdcd39",
          fontFamily: "Akrobat",
          fontWeight: 800
        }
      }}
    />
  );
};

export { StyledTextArea1 };

非常感谢任何帮助。

【问题讨论】：

标签： javascript reactjs material-ui textfield overlapping

【解决方案1】：

通过inputProps 设置字体样式在textarea 元素上定义这些样式，而Material-UI 控制包装textarea 的div（使用MuiInputBase-root CSS 类）上的字体大小。如果您将控制字体样式的位置移动到目标.MuiInputBase-root，它会按需要工作。

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

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 350
  }
}));

const StyledTextField = styled(TextField)`
  .MuiInputBase-root {
    font-size: 30px;
    color: #fdcd39;
    font-family: Akrobat;
    font-weight: 800;
  }
  .MuiInput-underline::before {
    border-bottom-color: white;
  }
  .MuiInput-underline:hover:not(.Mui-disabled)::before {
    border-bottom-color: white;
  }
  .MuiInput-underline::after {
    border-bottom-color: #fdcd39;
  }
`;

const StyledTextArea1 = ({ Label, fieldType, handleChange }) => {
  const classes = useStyles();

  return (
    <StyledTextField
      id="standard-basic"
      className={classes.textField}
      label="Test Label"
      defaultValue="Default Value"
      multiline
      fullWidth
      rows="5"
      variant="outlined"
      margin="normal"
      // onChange={handleChange(fieldType)}
      InputLabelProps={{
        style: {
          color: "black",
          fontSize: 30,
          borderBottom: "white",
          fontFamily: "Akrobat"
        }
      }}
    />
  );
};

export { StyledTextArea1 };

在我的沙箱中，我还在index.js 中的所有内容周围添加了<StylesProvider injectFirst>，以确保在<head> 中的Material-UI CSS 类之后注入样式组件CSS 类，以便您的样式通过样式覆盖-在特异性相同的情况下，组件将获胜。

【讨论】：

太棒了！谢谢瑞恩。像魅力一样工作。