Question 46118 in CSS Question posted in
Some basic documentation can be found here.

How to properly change the font size from MUI TextField Label – CSS

I would like to be able to change the label fontSize from the material ui TextField component. I’ve come up with the InputLabelProps which works great, but as you can see in the picture bellow the label is too squeezy when focused

enter image description here

Here is my implementation of the TextField

<TextField {...params} InputLabelProps={{
    style : {color: '#518eb9', fontSize: 18, fontWeight: 1000}
}} label="Hovedkategori" />

I’ve found out that the label displayed when focused actually comes from another tag:

<legend class="css-1ftyaf0"><span>Hovedkategori</span></legend>
Tags:

3

Answers


  1. 0

    I’ve encountered the same problem, try to use Mui Theme provider to create a override style theme. There are many small divs there that can get in your way, hide them or move them.
    MUI themes

    Login or Signup to reply.
  2. 0

    If you want resolve this problem you should add into your TextField component an css that modify MuiOutlinedInput-notchedOutline class.
    With sx you can modify this class, and set the same font-size for fix your problem.

    "&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }

    <TextField
    InputLabelProps={{
      sx: {
        color: "#518eb9",
        fontSize: "28px",
        fontWeight: 1000,
        "&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
      }
    }}
    label="Hovedkategori"
  />
    Login or Signup to reply.
  3. 0

    You can use mui Box component and set fontSize and fontWeight

    const LabelValue = (label) => {
    return (
        <Box color="#518eb9" fontSize={18} fontWeight={1000}>
            {label}
        </Box>
    )
}

 <TextField label={LabelValue("Hovedkategori")} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search