Parece que Material Dashboard 2 React no admite una entrada de selección al buscar en sus documentos .

Pero bajo el capó, usan TextField de @mui/material junto con @mui/material/styles y TextField puede ser una entrada seleccionada. Consulte el código en MDInputRoot.js .

1. Reemplace su código para seleccionar la entrada con el siguiente componente nativo del tema, excepto MenuItem , que debe importarse desde @mui/material :

 <MDBox mb={2}> <MDInput size="large" select labelId="demo-simple-select-label" id="demo-simple-select" //value={gender} label="Gender" InputProps={{ classes: { root: "select-input-styles" }, }} fullWidth > <MenuItem value="Male">Male</MenuItem> <MenuItem value="Female">Female</MenuItem> </MDInput> </MDBox>

Hemos establecido una nueva clase CSS de nivel raíz para el elemento de entrada al proporcionar la clase usando InputProps .

2. Luego cree un nuevo archivo CSS llamado inputCustomStyles.css dentro del directorio src/components/MDInput .

 .select-input-styles { padding: 12px 0; } .select-input-styles svg { display: block; width: 2em; height: 2em; top: calc(50% - 1em); }

el padding se ha cambiado para solucionar el problema de la altura de entrada que tiene y la pantalla svg se ha configurado para bloquear para que se vea una flecha.

3. Ahora importe los estilos en la parte superior del archivo MDRootInput.js :

 ... ... import "./inputCustomStyles.css";

Revisé los cambios en el archivo src/layouts/authentication/sign-in/index.js y se ve a continuación: