Issue with Error in Expanding Label in Material-Ui using React

I have managed to increase the size of the Label in the TextField component of my React application. However, I am encountering an issue where it overlaps some text on its right when it shrinks.

https://i.sstatic.net/BikHJ.png

Here is the link for reference

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

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputLabel-shrink": {
      fontSize: "24px"
    }
  }
}));

export default function CustomTextField({ InputLabelProps = {}, ...props }) {
  const classes = useStyles();
  return <TextField {...props} className={classes.root} />;
}

Answer №1

Utilizing the DevTools is highly recommended for implementing customizations effectively. The spacing size is influenced by the <legend> element:

To accommodate for the CSS transformation, the font size of the element is set to 0.75em.

To maintain consistency, you can apply the same font size to its parent element:

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

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputLabel-shrink, & fieldset": {
      fontSize: "24px"
    }
  }
}));

export default function CustomTextField({ InputLabelProps = {}, ...props }) {
  const classes = useStyles();
  return <TextField {...props} className={classes.root} />;
}

https://codesandbox.io/s/material-ui-custom-textfield-composition-forked-g5co7?file=/src/CustomTextField.js

Answer №2

To make your TextField resize by Material-UI, use the Shrink prop instead of specifying fontSize: "24px". Ensure your TextField is set up like this:

<TextField InputLabelProps={{shrink: true}} .../>

If you need to customize the label size:

    fontSize: 30,
    color: "red",
    "&$labelFocused": {
      color: "purple"
    }
  },
  labelFocused: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="Your Label"
        InputLabelProps={{
          classes: {
            root: classes.labelRoot,
            focused: classes.labelFocused
          }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag? Below is th ...

Navigating the new Material UI V5: Unlocking theme properties types in @mui/material version 5

Since upgrading from @material-ui version 4 to version 5, I have been having trouble accessing the theme properties. Can anyone offer insight on how to resolve this issue? Material-ui v4: I had no issues accessing the theme properties! https://i.stack.img ...

What is the most efficient method for incorporating CSS styles? What are the advantages of using @

I am curious about the benefits and reasons for using @import to bring stylesheets into a pre-existing stylesheet, as opposed to simply including another... <<link rel="stylesheet" type="text/css" href="" /> in the head of the webpage? ...

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

What sets apart the implementation from the Three.js demo?

Attempting to replicate the provided example using react-three-fiber. Example link: https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_sphere.html (currently only implemented the init method, no animation) Here is my code: const Sphere = ...

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

Issues with the loading of CSS in Wordpress

I transferred the project from the server to my personal computer (localhost). However, whenever I make changes to the css file, these modifications do not appear on the website when viewed locally. After attempting to switch browsers and clear the browse ...

Follow the guidelines and examples provided on the Material UI documentation/demo page to incorporate Material

My goal is to incorporate the left sidenav under the AppBar, similar to how it is displayed on the material-ui documentation page. Any suggestions on how to achieve this? https://i.stack.imgur.com/A6bY5.png ...

Confounding Typescript Type Bindings

I am facing an issue with my Typescript component that uses react-jss and the classes object for styling. The error message I'm getting is: Binding element 'classes' implicitly has an 'any' type., and I'm struggling to find a ...

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...

Tips for efficiently transferring properties between functions in a React component

Is there a way to pass the itemId prop to the SaveButton component in the navigation header without relying on Context API or Redux? const PostingDetail = ({ navigation }) => { const itemId = navigation.getParam('itemId', null) return ...

ul background transparency only works with absolute positioning if using a Transparent PNG

Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered l ...

Issues with the parallax zooming out effect

Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height. In the example pr ...

Troubleshooting the TS2559 error when using radium in React typescript: CSSProperties type mismatch

Looking to integrate Typescript into React and incorporate some styling using Radium. I understand that JSX style does not support media queries, but I'm unsure how to resolve this issue. Can anyone provide guidance? Thank you! Encountering errors w ...

I am looking to eliminate an object from an array based on the object's unique identifier

I am facing an issue with filtering an object based on the id in order to remove it from the array. The filter function I am using is not working as expected. My goal is to only remove the object that matches the provided id, while sending the remaining ...

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

Storage can be shared globally in a React/Nextjs application

My current situation involves retrieving data through an application, however I am encountering 429 errors due to server limits restricting infinite requests. To address this issue, my plan is to fetch data nightly and store it in a centralized storage ac ...