adjust css in InputLabel-CodePudding

I have a drop down list, an example of which I took from the mui documentation. But I need to customize this drop-down list a little. The problem is pictured below.

I would like to place the inscription "choose format" in the middle of the field and change the font size.

    return (
      <FormControl sx={{ m: 1, minWidth: 150 }}  size="small">
        <InputLabel>Сhoose format</InputLabel>
        <Select
          value={age}
          label="Сhoose format"
          onChange={handleChange}
          sx={{
            "& .MuiSelect-select": {
              paddingTop: 0.1,
              paddingBottom: 0.4,
              
          },
     }}
        >

        </Select>
      </FormControl>

  );

CodePudding user response：

I would change the line height and text size of the label to position it inside the box.

CSS:

label.MuiFormLabel-root {
  font-size: 14px;
  line-height: 16px;
}

Use the line-height to control the vertical position inside the box, adjust both values to your liking.

Demo

CodePudding user response：

Font Size

In your styles.css file add the following:

.MuiFormLabel-root {
  font-size: 25px;
}

This will allow you to adjust the font size for the placeholder specifically.

Alignment

To ensure the placeholder is in the middle, simply adjust the fontsize in the component like so:

export default function App() {
  const [age, setAge] = React.useState("");

  return (
    <FormControl sx={{ m: 1, minWidth: 150 }} size="small">
      <InputLabel>Сhoose format</InputLabel>
      <Select
        value={age}
        label="Сhoose format"
        sx={{
          "& .MuiSelect-select": {
            fontSize: 25 // Matches the font size to the styles.css
          }
        }}
      >
        <MenuItem value={10}>.txt</MenuItem>
        <MenuItem value={20}>.docx</MenuItem>
      </Select>
    </FormControl>
  );
}

Or if you don't want to add the change in your style.css file or if you want to use styled components you can add it directly in your existing sx in the FromControl component

<FormControl sx={{ m: 1, minWidth: 150, ".MuiFormLabel-root": { fontSize: 25} }} size="small">'