Login/Register
Input text overlapping in TextField multiline area of Material-UI
Asked Answered
javascriptreactjsmaterial-uitextfieldoverlapping
F

1

6

The input text in a Material-UI Multiline TextField is overlapping each other (not the label).
See sample and code in CodeSandBox: https://codesandbox.io/s/keen-wu-yquk6

I suspect it may have something to do with the fact that I increased the Font-Sized to 30, but the line-height (or something else) remained configured for the default size font.

Samples screenshots: enter image description here enter image description here

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

Any assistance greatly appreciated.

Frankfrankalmoign answered 13/11, 2019 at 14:50 Comment(0)
L
4

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. If you move where you control the font styles to target .MuiInputBase-root, it works as desired.

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

Edit TextField font size

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 cases where specificity is the same.

Lumpy answered 13/11, 2019 at 15:10 Comment(1)
That's amazing! Thanks Ryan. Works like charm. – Frankfrankalmoign

© 2022 - 2024 — McMap. All rights reserved.