javascript - 试图从弹出窗口的 ul 标签中删除填充

Question

• 当我点击 chip chipName="button test IPA"时，弹出窗口打开。
• 我正在尝试从该弹出窗口的 ul 标记中删除填充。
• 但问题是我无法在 jsx 的 html 中找到 ul 标签。
• 我在 react 代码中给出了类名，但我仍然无法定位
• 能否请您帮助我，以便将来我自己解决。
• 提供下面的代码片段

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"
  }
})

;

Answer 1

转发MenuListProps底层List组件(MenuList 与此组合)禁用应用于它的填充。

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

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