I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my code:
const notificationIcon = require ('./../../images/notification-icon.png')
const avatarImage = require ('./../../images/avatar.png')
const CustomButton = ({
handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
<Button onClick={handleToggle} style={{backgroundImage: `url(${notificationIcon})`}} square>
</Button>
)
function Navbar () {
return (
<>
<TopBar style={{ backgroundColor: '#e6edec' }}>
<TopBarSection>
<TopBarTitle>
<Avatar imgUrl={avatarImage} name='John Doe' style={{ fontFamily: 'Arial', fontSize: '20px' }} />
</TopBarTitle>
<Dropdown ButtonComponent={CustomButton}>
<DropdownItem>Click me</DropdownItem>
</Dropdown>
</TopBarSection>
</TopBar>
<section
style={{
padding: 50,
textAlign: 'center'
}}
>
Some content
</section>
</>
)
}
export default Navbar