当我单击chip chipName =“ button test IPA”时,将弹出一个窗口。
我正在尝试从该弹出窗口的ul标签中删除填充。
但问题是我无法在jsx的html中找到ul标签。
我在反应代码中给出了className,但仍然无法定位
您能帮我吗,以便将来我自己修复。
在下面提供代码段
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"
}
})
;
最佳答案
将MenuListProps
转发到基础List
组件(由MenuList
组成)以禁用应用于其的填充。
可以在chips-dialog.js
中进行此编辑
<Menu
className={classes.chipButtonContainer}
//...
MenuListProps={{ disablePadding: true }}
onClose={this.handleClose}
>
<!--...-->
</Menu>