CODEWITHSUNDEEP
cssreactjstypescriptmaterial-ui
lydal
lydal

Reputation: 940

adding an image background to a button component in React Typescript

I'm using a material UI library in a React project using react typescript. I want this button to have a picture as a background. However, the button does not accept src or imageURL and returns a typescript error and the css style background doesn't show the picture either. this is my code:

const noticon = require ('./../../images/nicon.png') 
const Avatarpic = require ('./../../images/Avatar.png') 

const ExampleButton = ({
  // useOpenState hook handlers
  handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
  <Button onClick={handleToggle} style={{backgroundImage: '{noticon}'}} square>
  </Button>
)
function Navbar () {
  return (
    <>
      <TopBar style={{ backgroundColor: '#e6edec' }}>
        <TopBarSection>
          <TopBarTitle>
            <Avatar imgUrl={Avatarpic} name='حسین ساداتی پور' style={{ fontFamily: 'IranSans', fontSize: '20px' }} />
          </TopBarTitle>
          <Dropdown ButtonComponent={ExampleButton}>
          <DropdownItem>Item to click</DropdownItem>
        </Dropdown>
        </TopBarSection>
        {// <TopBarSection>
          // burger menu Icon
          // </TopBarSection>
        }
      </TopBar>
      <section
        style={{
          padding: 50,
          textAlign: 'center'
        }}
      >
      Some content
      </section>
    </>
  )
}

export default Navbar

Upvotes: 1

Views: 1457

Answers (1)

Noman Gul
Noman Gul

Reputation: 397

you need to do this instead:

<Button onClick={handleToggle} style={{backgroundImage: `url(${noticon})`}} square>

Upvotes: 2

Related Questions