reactjs - Min MUI Select-komponent visar inte placeholder- eller label-egenskaper

Grundläggande vad titeln säger. Jag försöker använda Select-komponenten i min app men både placeholder="Text" och label={"Text"} props visar inte det förväntade resultatet.

När man använder placeholder renderas Select som "tom", medan label-egenskapen verkar göra något men efter att ha klickat på den blir detta resultat:

Min package.json visar

"@material-ui/core": "^5.0.0-alpha.27",
"@material-ui/icons": "^5.0.0-alpha.27",
"@material-ui/lab": "^5.0.0-alpha.27",
"@material-ui/system": "^5.0.0-alpha.27",

<Select
  label={"Text"}
  variant="outlined"
  size="small"
  fullWidth
>
  <MenuItem value={1}>Option 1</MenuItem>
  <MenuItem value={2}>Option 2</MenuItem>
</Select>

Svar #1

Du kan försöka använda alternativet 'displayEmpty' på Material Select om dina alternativ inte inkluderar ett tomt värde ''

https://v4.mui.com/api/select/

och sedan i funktionen renderValue kan du kontrollera om värdet är "", returnera platshållartexten.

Något sådant här :

      <Select
        displayEmpty
        renderValue={(value: unknown) => {
          if (!value) {
            return <Typography color="gray">your label here</Typography>;
          }
          return <>{value}</>;
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>

Svar #2

Material UI stöder inte platshållare för <Select /> direkt, eftersom det också är etiketten: Se: här

I stället kommer du att använda <InputLabel>Text</InputLabel>

Något sådant här:

<FormControl>
    <InputLabel>Text</InputLabel>
    <Select variant="outlined" size="small" fullWidth>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    </Select>
</FormControl>

Relaterade artiklar