reactjs - 对话框 PaperProps 背景 url 不适用于本地路径

Question

我需要更改 Dialogs 的背景图像。我找到了覆盖 PaperProps 的解决方案。这是我使用的解决方案： React JS - 如何在对话框的 PaperProps 中添加样式（material-ui）

奇怪的是，如果我使用网站 url 没有问题。但是使用本地路径“../../images/image.png”会导致问题。我将使用带有 5 个不同页面的对话框，它们都将是不同的背景。

我尝试了很多不同的图像。

render() {
    const {
      fullScreen,
      children,
      showcaseText,
      showcaseDescription,

      noCloseButtonNeeded
    } = this.props;
    return (
      <Dialog id="dialog-id"



    PaperProps= {{
      style: {
        backgroundImage:'url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80")'

       }
   }}

        fullScreen={fullScreen}
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby='responsive-dialog-title'

      >

        <DialogTitle

          onClose={this.handleClose}
          noCloseButtonNeeded={noCloseButtonNeeded}
        >
          <img id="checkout-brand-desktop"
            src={require('../../images/uAppLogo.png')}
            height='30px'
            width='130px'
            alt={'logo'}
          />
          <img id="checkout-brand-mobile"
            src={require('../../images/[e-mail]')}
            height='30px'
            width='130px'
            alt={'logo'}
          />
        </DialogTitle>
        <div className='showcase'>
          <h1 className='showcase__title'>{showcaseText}</h1>
          <div className='showcase__description'>{showcaseDescription}</div>
          {children}
        </div>

      </Dialog>
    );
  }

标签： reactjsmaterial-ui

Answer 1

我解决了我的问题；

    PaperProps= {{
      style: {
        backgroundImage:'url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80")'

       }
   }}

        fullScreen={fullScreen}
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby='my own labels'

      >

我像 id 一样使用 aria-labelledby。我创建了自己的标签，然后在我的 scss 文件中使用了这个标签。

div[aria-labelledby="my labels"]{
background-image:url("#")
}