CODEWITHSUNDEEP
reactjsmaterial-ui
Jakub
Jakub

Reputation: 2709

React Material UI: Outlined text field shows line through label

I'm using MUI 5 and React and I have this issue that the outlined text field shows line through the label as per the screenshot

Issue picture

I have no idea how to fix it.

My fields looks like this

<FormControl fullWidth variant="outlined">
      <InputLabel shrink id={labelId}>
        {label}
      </InputLabel>
      <Controller
        as={
          <Select
            displayEmpty
            name={name}
            labelId={labelId}
            id={name}
            label={label}
          >
            <MenuItem key={`no${name}`} value="">
              {intl.formatMessage({
                defaultMessage: 'No proxy number',
              })}
            </MenuItem>
            {items.map(pn => (
              <MenuItem key={pn.id} value={pn.id}>
                <ListItemIcon>
                  <img
                    src={pn?.country?.flagIconUrl}
                    alt={pn.countryCode}
                    width="20px"
                    height="15px"
                  />
                </ListItemIcon>
                {pn.value}
              </MenuItem>
            ))}
          </Select>
        }
        name={name}
        control={control}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

Then the above is used as a function called SelectFormInput to make the specific fields

<Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="proxyNumber"
              name="proxyNumber"
              items={proxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Proxy phone Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number used by site users',
              })}
            />
          </Grid>

          <Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="inboundProxyNumber"
              name="inboundProxyNumber"
              items={inboundProxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Inbound Proxy Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number seen by candidate',
              })}
            />
          </Grid>

I was unable to find any solution on the net for my specific situation.

Upvotes: 9

Views: 9327

Answers (5)

daodao
daodao

Reputation: 1

I added a white background color to the inputLabel and it works. <InputLabel sx={{backgroundColor: "white"}}>Region</InputLabel>

Upvotes: 0

Aayush Bhattacharya
Aayush Bhattacharya

Reputation: 1934

TextField label

enter image description here to resolve above issue you need to make the input font size and label fontsize same

 <TextField
    fullWidth
    label="First Name"
    InputLabelProps={{ shrink: true, style: { fontWeight: 700, fontSize: 20 } }}
    InputProps={{ style: { fontSize: 20, height: 35 } }}
 />

Upvotes: 0

Italo Silva
Italo Silva

Reputation: 21

you can also try add a background color to InputLabel, on createTheme, this works for me:

import { createTheme } from '@material-ui/core';

const theme = createTheme({
  overrides: {
    MuiInputLabel: {
      root: {
        backgroundColor: '#ffffff',
        paddingLeft: '4px',
        paddingRight: '4px'
      }
    }
  }
});

export default theme;

Upvotes: 2

Jakub
Jakub

Reputation: 2709

I found a solution that helped my specific situation. I had to add this

input={<OutlinedInput notched label={label} />}

Inside my

<Select
     displayEmpty
     name={name}
     labelId={labelId}
     id={name}
     input={<OutlinedInput notched label={label} />} />

And so the label UI has been fixed

Fixed label

Upvotes: 7

kukrt
kukrt

Reputation: 2207

There is a <fieldset/> tag within the FormControl, and the <legend/> inside of it is making the white block possible.

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L142

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L79

I am not sure in your case (<Select/>), but if you are trying to use raw input with the outlined style, you have to give label prop to the <OutlinedInput/>.

<FormControl fullWidth>
  <InputLabel>Phone</InputLabel>
  <OutlinedInput label="Phone" /> // without label="...", you get the line-through
</FormControl>

Upvotes: 2

Related Questions