¿Establecer ancho de selección de MUI?

6 minutos de lectura

avatar de usuario
Sócrates

Estoy tratando de configurar el MUI Select ancho del componente. Para esto tengo que proporcionar una clase a la FormControl componente, como mw-120 que enlaza con una clase CSS que define el min-width de 120px.

Componente de selección de interfaz de usuario de material:

<FormControl className="mw-120">
    <InputLabel htmlFor="selected-language">Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

Clase CSS:

.mw-120 {
    min-width: 120px;
}

Si bien esperaría que el tamaño de la Select ahora tiene un ancho mínimo de 120 px, el componente permanece exactamente igual después de renderizar, como se muestra en la siguiente imagen. En otras palabras, es estrechar. El ancho no es lo suficientemente grande. El ancho debe ser mayor que la etiqueta. Language.

ancho del componente Seleccionar demasiado pequeño

Un análisis de elementos dentro de Chrome Developer Tools ha demostrado que el elemento DIV principal de ese componente tiene una clase .MuiFormControl-root-234 eso contiene min-width: 0;y está ubicado/clasificado más alto que mi .mw-120 clase. Supongo que esto anula mi .mw-120 clase, ¿verdad? ¿Hay alguna otra forma de influir en el ancho del componente Material UI Select? No hay ejemplos útiles de cómo influir en el ancho de este componente en el Página de selección de componente de interfaz de usuario de material.

  • Su clase no funciona porque está más arriba en el archivo css compilado. La solución correcta es asegurarse de que su nueva clase esté más abajo en ese archivo. O use estilos en línea y !important si no te importa tu proyecto.

    – Arseniy-II

    14 mayo 2019 a las 13:16

  • ¿Le gustaría leer esta sección de los documentos de mui? material-ui.com/customization/components/…

    – Hans Spiess

    4 abr 2021 a las 21:11

avatar de usuario
pedro vieira

Si está haciendo algo con un estilo único, puede usar el estilo en líneafuncionó para mí.

<FormControl style={{minWidth: 120}}> // this line
    <InputLabel htmlFor="selected-language">Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

ingrese la descripción de la imagen aquí

Si desea reutilizarlo en más código y quiere evitar la duplicación de código, probablemente querrá trabajar con Temas

  • @PedroVieira Gracias, el style param hace el truco de hecho. Y tienes razón sobre la duplicación de código. Uso SASS para todos los estilos y creo que Material UI también agrega algo de CSS. Esto lleva al punto de que mi CSS siempre estará debajo de Material UI y, por lo tanto, se sobrescribirá.

    – Sócrates

    14 mayo 2019 a las 18:06

  • @Socrates, la aplicación en la que trabajé es bastante sencilla, por lo que nunca pasé por eso, pero tal vez podría reducir la duplicación con temas, como dije, pero no sé si su CSS no se sobrescribirá de esta manera también

    – Pedro Vieira

    14 mayo 2019 a las 18:17

  • Excelente Pedro. Ahora, ¿qué pasa si quiero usar como un % y no una longitud fija? ´style={{width:’33%’}} no tiene efecto, y mis elementos ya tienen un xs={4} un tributo

    –Juan Salvador

    16 de diciembre de 2019 a las 13:58

avatar de usuario
KyleMit

Para una posible reutilización, el muestras de documentos oficiales lograr esto con makeStyles como esto:

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

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

Después useStyles genera nombres de clase como este:

const classes = useStyles();

Luego agrega a tu FormControl componente como este:

<FormControl className={classes.formControl}>

Demostración en fragmentos de pila

const { FormControl, InputLabel, Select, MenuItem, makeStyles } = MaterialUI;

const App = function () {

  const useStyles = makeStyles((theme) => ({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120,
    },
  }));

  const classes = useStyles();

  return (
    <div className="App">
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={''}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  )
}

ReactDOM.render(
   <App />,
   document.getElementById('root')
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>

<div id="root"></div>

En MUI v5 puedes usar el sx apuntalar. Tenga en cuenta que el siguiente ejemplo utiliza un Seleccione TextField que es esencialmente lo mismo que Select excepto que puede mostrar la etiqueta y el texto auxiliar. Consulte esta respuesta para obtener más detalles sobre cómo TextField obras.

<TextField select label="Select" sx={{ minWidth: 130 }}>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

Demostración de Codesandbox

avatar de usuario
Spatz

En nuestro caso selectores .MuiFormControl-root y .mv-120 tienen la misma especificidad, por lo que importa el orden en que se declaran. Los estilos generados se inyectan en último lugar en el <head> sección de la página, y cuando los estilos personalizados también se colocan en esta sección, tienen una prioridad más baja:

const { FormControl, InputLabel, Select, MenuItem } = MaterialUI

const App = function () {
    return (<FormControl className="mw-120">
        <InputLabel id="language-label">Language</InputLabel>
        <Select
            labelId="language-label"
            id="language"
            value="">
            <MenuItem value={"en"}>English</MenuItem>
            <MenuItem value={"de"}>German</MenuItem>
            <MenuItem value={"ru"}>Russian</MenuItem>
        </Select>
    </FormControl>)
}

ReactDOM.render(<App />, document.getElementById('root'))
.mw-120 {
    min-width: 120px;
}
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>
    
<div id="root"></div>

Pero cuando los estilos personalizados están en el <body> sección, tienen prioridad:

const { FormControl, InputLabel, Select, MenuItem } = MaterialUI

const App = function () {
    return (<FormControl className="mw-120">
        <InputLabel id="language-label">Language</InputLabel>
        <Select
            labelId="language-label"
            id="language"
            value="">
            <MenuItem value={"en"}>English</MenuItem>
            <MenuItem value={"de"}>German</MenuItem>
            <MenuItem value={"ru"}>Russian</MenuItem>
        </Select>
    </FormControl>)
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>

<style>
  .mw-120 {
    min-width: 120px;
  }
</style>

<div id="root"></div>

Hay otros métodos para controlar la ubicación de los generados. <style> etiquetas, que se describen aquí.

¿Ha sido útil esta solución?