Question

我正在努力覆盖Select组件的默认填充以匹配我其他文本字段的大小。我知道我需要修改嵌套的组件，但一直找不到有效的解决方案。

<div className='wifi-chooser-column'>
<TextField
    style={{margin: '6px'}} 
    label='SSID' 
    variant='outlined'
    size='small'
/>
<Select
    style={{margin: '6px', padding: '0px'}}
    variant='outlined'
    value={this.state.security}
    onChange={(event) => this.setState({security: event.target.value})}
    classes={{
        select: {
            padding: '10.5px 14px'
        }
    }}
>
    <MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
    <MenuItem value='WEP'>WEP</MenuItem>
    <MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField 
    style={{margin: '6px'}} 
    label='Username' 
    variant='outlined'
    size='small'
/>
<TextField 
    style={{margin: '6px'}} 
    label='Password' 
    variant='outlined'
    size='small'
/>

Layout issue

Answer 1

您可以尝试指定嵌套的组件，然后对其应用样式吗？

类似这样的东西

 <Select
    inputField={<TextField className={classes.styleNestedComponent} />}
    variant='outlined'
    value={this.state.security}
    onChange={(event) => this.setState({security: event.target.value})
>
    <MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
    <MenuItem value='WEP'>WEP</MenuItem>
    <MenuItem value='WPA2'>WPA2</MenuItem>
</Select>

Answer 2

一种重写Material-ui属性的方法是使用makeStyles

在此链接中，他们解释了覆盖（https://material-ui.com/customization/components/）的方法。

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

import "./App.css";
const useStyles = makeStyles({
  root:{
    paddingTop: "10.5px",
    paddingBottom: "10.5px"
  },
  MuiInputBase:{
    padding: 0
  }
});
function App() {
  const [security, setSecurity] = useState("");
  const classes = useStyles();

  return (
    <div className="App">
      <TextField
        style={{ margin: "6px" }}
        label="SSID"
        variant="outlined"
        size="small"
      />
      <Select
        style={{ margin: "6px", padding: "0px 50px" }}
        variant="outlined"
        value={security}
        onChange={event => setSecurity(event.target.value)}
        classes={{
          outlined: classes.outlined,
          root: classes.root,
          "MuiInputBase-input": classes.MuiInputBase
        }}
      >
        <MenuItem label="security" value="Unsecured">
          Unsecured
        </MenuItem>
        <MenuItem value="WEP">WEP</MenuItem>
        <MenuItem value="WPA2">WPA2</MenuItem>
      </Select>
      <TextField
        style={{ margin: "6px" }}
        label="Username"
        variant="outlined"
        size="small"
      />
      <TextField
        style={{ margin: "6px" }}
        label="Password"
        variant="outlined"
        size="small"
      />
    </div>
  );
}

export default App;

因此，我使用了makeStyles，并为Select组件分配了与其他TextFields相同的填充值。

Answer 3

我在文档中找到了另一种方法，这对我来说更容易使用：我没有使用 Select 组件，而是使用带有“select”道具的 TextField

参见：https://material-ui.com/components/text-fields/#select

<TextField
  id="standard-select-currency"
  select
  label="Select"
  value={currency}
  onChange={handleChange}
  helperText="Please select your currency"
>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

它允许您访问 TextField 道具，例如 margin="none", margin="dense"

无法更改材料UI选择组件的填充

3 个答案: