在Material-UI

2024-05-18 • 问答

Material-UI Multiline TextField中的输入文本彼此重叠（而不是标签）。
请参阅CodeSandBox中的示例和代码：https://codesandbox.io/s/keen-wu-yquk6

我怀疑这可能与我将Font-Sized（字体大小）增加到30，但是行高（或其他内容）仍配置为默认大小字体有关。

示例屏幕截图：

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 };

非常感谢您的协助。

通过inputProps设置字体样式将在textarea元素上定义这些样式，而Material-UI控制div（使用MuiInputBase-root CSS类）上的字体大小包装textarea。如果将控制字体样式的位置移到目标.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 };

在沙盒中，我还为<StylesProvider injectFirst>中的所有内容添加了index.js，以确保样式元素CSS类在<head>中的Material-UI CSS类之后注入。如果样式相同，则通过样式组件覆盖样式会获胜。

在Material-UI

xiakaipkq 回答：在Material-UI

大家都在问