Material-Benutzeroberfläche festlegen Breite auswählen?

Question 1

Ich versuche, die Material-Benutzeroberfläche festzulegen Select Breite der Komponente. Dafür muss ich dem eine Klasse zur Verfügung stellen FormControl Komponente, wie z mw-120 die auf eine CSS-Klasse verweist, die die definiert min-width von 120px.

Material-UI-Komponente auswählen:

<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>

CSS-Klasse:

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

Während ich die Größe erwarten würde Select Wenn die Komponente nun eine Breite von mindestens 120 Pixeln hat, bleibt die Komponente nach dem Rendern genau gleich, wie im folgenden Bild gezeigt. Mit anderen Worten: Es ist zu eng. Die Breite ist nicht groß genug. Die Breite sollte größer als das Etikett sein Language.

Eine Elementanalyse innerhalb der Chrome Developer Tools hat gezeigt, dass das Haupt-DIV-Element dieser Komponente eine Klasse hat .MuiFormControl-root-234 das beinhaltet min-width: 0;und es liegt/rang höher als mein .mw-120 Klasse. Ich denke, das überschreibt meine .mw-120 Klasse, oder? Gibt es eine andere Möglichkeit, die Breite der Material UI Select-Komponente zu beeinflussen? Es gibt keine hilfreichen Beispiele für die Beeinflussung der Breite dieser Komponente Material-Benutzeroberfläche: Seite „Komponente auswählen“..

Question 2

Wenn Sie ein einmaliges Styling durchführen, können Sie das verwenden Inline-Stilbei mir hat es funktioniert.

<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>

Wenn Sie es in mehr Code wiederverwenden möchten und Codeduplizierungen vermeiden möchten, möchten Sie wahrscheinlich damit arbeiten Themen

Question 3

Für eine mögliche Wiederverwendung ist die Offizielle Dokumentbeispiele erreichen Sie dies mit makeStyles so was:

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

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

Dann useStyles generiert Klassennamen wie diesen:

const classes = useStyles();

Dann fügen Sie zu Ihrem hinzu FormControl Komponente wie diese:

<FormControl className={classes.formControl}>

Demo in Stack Snippets

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>

Question 4

In Material-Benutzeroberfläche v5 du kannst den … benutzen sx Stütze. Beachten Sie, dass im folgenden Beispiel a verwendet wird wählen TextField was im Wesentlichen dasselbe ist wie Select außer dass es die Beschriftung und den Hilfstext anzeigen kann. Weitere Informationen dazu finden Sie in dieser Antwort TextField funktioniert.

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

Question 5

In unserem Fall Selektoren .MuiFormControl-root Und .mv-120 haben die gleiche Spezifität, daher ist die Reihenfolge, in der sie deklariert werden, wichtig. Generierte Stile werden zuletzt injiziert <head> Abschnitt der Seite, und wenn benutzerdefinierte Stile auch in diesem Abschnitt platziert werden, haben sie eine niedrigere Priorität:

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>

Aber wenn benutzerdefinierte Stile in der <body> Abschnitt haben sie Vorrang:

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>

Es gibt andere Methoden, um die Platzierung der generierten Daten zu steuern <style> Tags, die beschrieben werden Hier.

Question 6

Sie können den Inline-Stil verwenden, bei mir hat es funktioniert.

<FormControl size="small" sx={{ width: "100%" }}>
              <InputLabel id="demo-select-small-label">Delay</InputLabel>
              <Select
                labelId="demo-select-small-label"
                id="demo-select-small"
                // value={delay}
                label="Delay"
                // onChange={handleOnDelayChange}
              >
                <MenuItem value={1000}>1 sec</MenuItem>
                <MenuItem value={2000}>2 sec</MenuItem>
                <MenuItem value={3000}>3 sec</MenuItem>
              </Select>
            </FormControl>