试图从弹出窗口的 ul 标记中删除填充答案

【问题标题】：trying to remove padding from the ul tag of the popup试图从弹出窗口的 ul 标记中删除填充
【发布时间】：2019-04-20 02:44:39
【问题描述】：

当我单击chipchipName="button test IPA" 时，会打开一个弹出窗口。
我正在尝试从该弹出窗口的 ul 标记中删除填充。
但问题是我无法在我的 jsx html 中找到 ul 标签。
我在反应代码中给出了 className 但我仍然无法定位
能否请您帮助我，以便我以后自己修复它。
在下面提供代码 sn-p

https://codesandbox.io/s/qqqk23x3q

tab-demo.js

<td>
                    <ChipsButton
                      className={classes.chipContainer}
                      chipName="button test IPA"

                      // menuItems={IPAMenuItems}
                      //ChipsButton
                    />
                  </td>

              **chips-dialog.js**

                  <Menu
          className={classes.chipButtonContainer}
          id="simple-menu"
          // anchorEl={anchorEl}
          open={open}
          onClose={this.handleClose}
        >
          <MenuItem className={classes.chipButtonContainerHeader}>
            {this.state.menuText}
          </MenuItem>

          <Button
            className={classes.chipButtonContainerButton}
            key={1}
            style={{
              backgroundColor:
                this.state.menuText === "Active selected" ? "green" : ""
            }}
            // style={{ display: this.state.display ? "none" : "" }}
            // aria-owns={anchorEl ? 'simple-menu' : undefined}
            aria-haspopup="true"
            value={"Active"}
            onClick={this.handleSelect}
          >
            Active
          </Button>
          <Button
            key={2}
            style={{
              backgroundColor:
                this.state.menuText === "Inactive selected" ? "green" : ""
            }}
            value={"Inactive"}
            // style={{ display: this.state.display ? "none" : "" }}
            // aria-owns={anchorEl ? 'simple-menu' : undefined}
            aria-haspopup="true"
            onClick={this.handleSelect}
          >
            Inactive
          </Button>
        </Menu>


        const styles = theme => ({
  chipButtonContainer: {
    border: "1px solid brown",
    padding: "0"
  },
  chipButtonContainerHeader: {
    backgroundColor: "green",
    border: "1px solid pink"
  },
  chipButtonContainerButton: {
    border: "1px solid black"
  }
})

;

【问题讨论】：

这里还不够。我们无法使用给定的代码重现您的问题。
@Will 抱歉忘记粘贴沙盒链接....更新了问题
那是很多代码。看起来这个类是罪魁祸首： .MuiList-padding-270 { padding-top: 8px;底部填充：8px； }
@Will 如何删除该填充...有什么方法可以覆盖 MuiList

标签： javascript html css reactjs material-ui

【解决方案1】：

将MenuListProps 转发到底层List 组件（MenuList 与此组合）以禁用对其应用的填充。

可以在chips-dialog.js进行此编辑

<Menu
   className={classes.chipButtonContainer}
   //...
   MenuListProps={{ disablePadding: true }}
   onClose={this.handleClose}
>
<!--...-->
</Menu>

【讨论】：

嘿，谢谢你的回复......它工作......你能告诉我你是怎么发现的，以便将来我自己修复它......
你能帮我解决问题吗...过去一周我一直坚持这个问题stackoverflow.com/questions/53265169/…
我首先在组件的源代码中探索组件中可用的 proptypes，看看哪些会影响设计。看到 MenuListProps 正在被转发，让我知道是否有办法使用 classNames 或特殊道具设置填充。

【解决方案2】：

<Select> 组件与 MenuProps 的工作原理相同

<Select
    multiple
    input={<Input />}
    MenuProps={{
      MenuListProps: {
        disablePadding: true
    }}>
    {employees.map((employee) => (
    <MenuItem key={employee.id} value={employee.id}>
        {employee.name}
    </MenuItem>
    ))}
</Select>

【讨论】：