- Upon clicking the chip with chipName="button test IPA", a popup window appears.
- I am attempting to remove the padding from the ul tag within that popup.
- The issue I'm facing is that I cannot locate the ul tag in my HTML or JSX code.
- I have assigned a className in the React code, but still unable to target it.
- Could you please assist me so I can learn how to fix this myself in the future?
- Providing the relevant 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"
}
})
;