добавление фонового изображения к компоненту кнопки в React Typescript - PullRequest
Новая
       12

добавление фонового изображения к компоненту кнопки в React Typescript

1 голос
/ 31 марта 2020

Я использую библиотеку пользовательского интерфейса материала в проекте React с использованием машинописного реагирования. Я хочу, чтобы эта кнопка имела изображение в качестве фона. Однако кнопка не принимает sr c или imageURL и возвращает ошибку машинописного текста, а фон в стиле css также не показывает картинку. это мой код: 

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

1 Ответ

1 голос
/ 31 марта 2020

вам нужно сделать это вместо: 

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