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.

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 React.Js be integrated into my Asp.net MVC core project?

I am currently working on an ASP.NET Core MVC web application, and I've incorporated the following technologies: Entity Framework SQL Server HTML, JavaScript, JQuery & Bootstrap. However, I am interested in enhancing the front-end of my ...

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js Error encountered while trying to import: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles'). I am currently grappling wi ...

Displaying a random number triggers a snackbar notification in a ReactJS application

Currently, I am utilizing the notistack package to display a snackbar on the screen. However, when calling the Snack component with enqueuesnackbar, a random number is displayed along with the snackbar. I'm looking to eliminate this random number fro ...

"Implementing a feature in React JS react-table to dynamically add a new column when a

I'm struggling to add a new column to react-table when a button is clicked. Even after re-rendering the table with a flag, I can't seem to add the new column. Can anyone suggest where I might be going wrong? Here's the link to the executable ...

Creating an Excel file with a right-to-left sheet column order using React: A step-by-step guide

The code provided above is functioning properly and successfully generates the file file.xlsx. Inquiry: Is there a way to arrange the columns of the sheets in right-to-left order? import React from 'react' import * as FileSaver from "file-s ...

Leveraging material elements in React applications

I have been studying the guide on Material UI Beta for react and I am interested in creating a simple component using the Drawer element. Here is an example code from the official documentation that demonstrates how to build such a Component. import React ...

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

Unable to display Polygon using ReactNativeMaps

Having trouble displaying the polygon correctly on my screen. I suspect it's due to receiving an array of objects from my API. This is the code snippet in question: <MapView.Polygon coordinates={poligonofinale} strokeColor="#000" fillColor= ...

Autocomplete from Material UI fails to highlight checkboxes that are pre-filled

I am trying to implement Autocomplete with pre-loaded data, but I am facing issues specifically with the checkbox field. I would like to mark them as selected. Take a look at the following code snippet: const [extensions, setExtensions] = useState([{valu ...

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

Adjust the properties within the component's styles using Angular 2

In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes. The approach involves ...

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

Tips for customizing the appearance of a Material UI Accordion: adjusting divider lines and collapse icons

I have set out to design a unique Material UI accordion that resembles this image: https://i.stack.imgur.com/ZWzCq.png My attempt at creating this customized MUI accordion involves the following code structure (this accordion also integrates custom search ...

Another option to innerTheme for customizing primaryTypographyProps in a unique way

I have a unique component with customized list items, icons, and buttons. I need to use this component in two different locations. In the first location, I adjusted the MuiListItemTextTypography props like this... const mainTheme = createMuiTheme({ . . . ...

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/ I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this? This has been bothering me for hours, as I need the p ...

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

What is the best way to securely transfer API keys to a React frontend for use in a React component?

I'm currently working with @react-google-maps/api to develop a map component in React. To load the component, we have to provide an API key for useJsApiLoader. How can I securely manage the API key so it's not exposed on the frontend? (Using an E ...

Enhance Component Reusability in React by Utilizing Typescript

As I embark on developing a React application, my primary goal is to keep my code DRY. This project marks my first experience with Typescript, and I am grappling with the challenge of ensuring reusability in my components where JSX remains consistent acros ...

redux-persist is removing object functions after storage

Currently, I am facing an issue while using redux-persist to store an object that includes properties and methods. The problem is that when I read the stored data, the methods are getting removed due to JSON.stringify being used before storing it. ...