javascript - trying to remove padding from the ul tag of the popup - Stack Overflow

admin管理员组

文章数量:1287584

• when I click chip chipName="button test IPA" a popup opens.
• I am trying to remove padding from the ul tag of that popup.
• but the problem is I am not able to find the ul tag in my html of jsx.
• I gave className in the react code but still I am not able to target
• can you please help me so that in future I will fix it myself.
• providing code snippet below

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

;

• when I click chip chipName="button test IPA" a popup opens.
• I am trying to remove padding from the ul tag of that popup.
• but the problem is I am not able to find the ul tag in my html of jsx.
• I gave className in the react code but still I am not able to target
• can you please help me so that in future I will fix it myself.
• providing code snippet below

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

;

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow edited Nov 17, 2018 at 1:22 asked Nov 16, 2018 at 21:45 user10509524user10509524 4

• There's not enough here to go on. We can't reproduce your problem with the given code. – Will Commented Nov 16, 2018 at 22:56
• @Will sorry forgot to paste the sandbox link....updated the question – user10509524 Commented Nov 17, 2018 at 1:24
• That is a lot of code. Looks like this class is the culprit: .MuiList-padding-270 { padding-top: 8px; padding-bottom: 8px; } – Will Commented Nov 17, 2018 at 1:56
• @Will how to remove that padding...is there any way can we overwrite MuiList – user10509524 Commented Nov 17, 2018 at 9:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

Forward MenuListProps to the underlying List ponent (MenuList poses with this) to disable padding applied to it.

This edit can be made in chips-dialog.js

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

Works the same for the <Select> ponent with MenuProps

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

本文标签： javascripttrying to remove padding from the ul tag of the popupStack Overflow