我正在構建一個頁面，我希望一個材質UI元素有一個使用背景圖像CSS屬性的背景圖像。我已經谷歌過了，當然，也有解決方案，但出于某種原因，我看不到那張圖片。

頁（page的縮寫）S.1:甚至把那個Material UI元素改成了regular對我一點幫助都沒有。

頁（page的縮寫）S.2:當我使用內部容器時，它會顯示出來，但這不是我想要的。

更新1:嘗試增加容器的高度和寬度，仍然沒有成功...

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';


const styles = {
    paperContainer: {
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>

            </Paper>
        )
    }
}

您必須使用相對路徑導入圖像，如下所示。

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


const styles = {
    paperContainer: {
        backgroundImage: `url(${Image})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>
                Some text to fill the Paper Component
            </Paper>
        )
    }
}

我找到了解決我問題的辦法。實際上，以像素為單位設置容器高度是有幫助的。

代碼如下:

import React from 'react';


const styles = {
    paperContainer: {
        height: 1356,
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div style={styles.paperContainer}>
            </div>
        )
    }
}

我讓它為material-ui工作，其中我的父元素的填充是24px，所以我給背景圖像的寬度增加了48px...

const styles = {
   heroContainer: {
     height: 800,
     backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   }
  };
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style={styles.heroContainer} >
    <Grid item>Goes here</Grid>
</Grid>

在使用材質UI React和Create React應用程序時遇到了相同的問題。這是對我有效的解決方案。注意，我為相對路徑設置了一個webpack別名

import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = {
  backgroundImage: 'url('+ BackgroundHeader+')'
  }

<div style={BackgroundHead}>

正如Romainwn所說，您需要將圖像導入到文件中。請確保使用相對于父級的路徑，因此不要使用

static/src/img/main.jpg    #looks for static folder from current file location

做

/static/src/img/main.jpg #looks for file from host directory:

另一種方法是向組件添加一個內聯樣式標簽:

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


export default class Home extends React.Component{
    render(){
        return(
            <Paper style="background:path/to/your/image;">

            </Paper>
        )
    }
}

你可以在MUI v5中使用sx道具

import React from 'react';

import Paper from 'material-ui/Paper';

import Image from '../img/main.jpg';


export default class Home extends React.Component{
    render(){
        return(
            <Paper sx={{ backgroundImage: `url(${Image})` }}>

            </Paper>
        )
    }
}