时间戳

首页 > 解决方案 > 如何设置反应材质ui选择组件高度的样式

reactjs - 如何设置反应材质ui选择组件高度的样式

问题描述

我正在研究一个高度不能降低的选择组件。下面是截图

在此处输入图像描述

我希望选择组件高度与自动完成组件的高度相同，即项目级别

我可以通过检查在 HTML div 元素中添加填充来实现这一点。但是，如何将该填充添加到组件是未知的。这是我为我添加的组件看到的 HTML。

<div class="MuiInputBase-root MuiOutlinedInput-root" style="width: 300px;"><div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="combo-box-demo" id="combo-box-demo" style="
    padding: 8px; //**** here I have added padding to fix the issue ****
">a134</div>
...
...
...

添加padding=8px后，问题暂时解决了。 在此处输入图像描述

问题代码存在于代码 sanbox https://codesandbox.io/s/great-hill-ywql0?file=/App.js

参考代码

import React from "react";
import "./styles.css";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        padding: "10px",
        paddingLeft: 0
      }}
    >
      <Select
        variant="outlined"
        style={{ width: 300 }}
        multiple="true"
        value={[]}
        onChange={this.handleProjectName}
        onClose={this.handleProjectName_close}
        id="combo-box-demo"
        renderValue={(selected) => selected.join(", ")}
      >
        <MenuItem value="">
          <em>Select</em>
        </MenuItem>
        {[{ id: 1, name: "a" }].map((item) => (
          <MenuItem key={item.id} value={item.name}>
            <Checkbox checked={[false]} />
            <ListItemText primary={item.name} />
          </MenuItem>
        ))}
      </Select>

      <Autocomplete
        size="small"
        value={[]}
        onChange={this.handleProjectLevel}
        id="combo-box-demo"
        options={[]}
        getOptionLabel={(option) => option.level}
        style={{ width: 300, marginLeft: 10 }}
        renderInput={(params) => (
          <TextField {...params} label="Project levels" variant="outlined" />
        )}
      />

      <Button
        variant="outlined"
        color="primary"
        disabled={![]}
        style={{ marginLeft: 10 }}
        onClick={this.handleProjectReport}
      >
        {" "}
        Submit
      </Button>
    </div>
  );
}

标签： reactjsreact-nativematerial-ui

解决方案

使用SelectDisplayProps道具。您也可以传递className或classes使这项工作。

const { Select, MenuItem } = MaterialUI

function App() {
  return (
    <div>
      <Select
        SelectDisplayProps={{ style: { paddingTop: 8, paddingBottom: 8 } }}
        variant="outlined"
        style={{ width: 300 }}
        multiple
        value={[]}
        renderValue={(selected) => selected.join(", ")}
      >
        <MenuItem value="">
          <em>Select</em>
        </MenuItem>
      </Select>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

推荐阅读