- 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" } })
;
Advertisement
Answer
Forward MenuListProps
to the underlying List
component (MenuList
composes 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>