Material-UI的TextField多行區域中的輸入文本重疊

Question

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

非常感謝任何幫助。

Answer 1

Setting the font styles via inputProps defines those styles on the textarea element whereas Material-UI controls the font size on a div (with the MuiInputBase-root CSS class) that wraps the textarea . 如果您將控制字體 styles 的位置移動到目標.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 };

In my sandbox, I also added <StylesProvider injectFirst> around everything in index.js to ensure that the styled-components CSS classes are injected after the Material-UI CSS classes in the <head> so that your style overrides via styled-components will win in特異性相同的情況。

Material-UI的TextField多行區域中的輸入文本重疊

問題描述

1 個解決方案

解決方案1
4 2019-11-13 15:10:08

Material-UI的TextField多行區域中的輸入文本重疊

問題描述

1 個解決方案

解決方案1 4 2019-11-13 15:10:08

解決方案1
4 2019-11-13 15:10:08