Question

我需要更改Dialogs的背景图像。我找到了一个解决方案，可以覆盖PaperProps。这是我使用的解决方案： React JS - How to add style in PaperProps of Dialog (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/NomadCardLogo-W@2x.png')}
            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>
    );
  }

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-labeledby。我创建了自己的标签，然后ı在我的scss文件中使用了此标签。

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

Dialog PaperProps背景网址不适用于本地路径

1 个答案: