imagen de fondo en el componente de reacción

Estoy creando una página y quiero que un elemento Material UI tenga una imagen de fondo usando background-image Propiedad CSS. Lo busqué en Google, por supuesto, y hay soluciones, pero por alguna razón, no puedo ver esa imagen.

PS1: incluso cambiar ese elemento Material UI a regular no me ha ayudado en absoluto.

PS2: cuando estoy usando el contenedor interior, se muestra, pero eso no es lo que quiero.

ACTUALIZACIÓN 1: Intenté agregar altura y ancho al contenedor, aún no tuve suerte…

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>
        )
    }
}

Debe importar la imagen de la siguiente manera, utilizando la ruta relativa.

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>
        )
    }
}

He encontrado una solución para mi caso. En realidad, establecer la altura del contenedor en píxeles ha ayudado.

Aquí está el código:

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>
        )
    }
}

Conseguí que esto funcionara para material-ui, donde el relleno en mi elemento principal era de 24 px, así que agregué 48 px al ancho de la imagen de fondo para que funcione…

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>

Tuve los mismos problemas mientras trabajaba con Material UI React y Create React App. Aquí está la solución que funcionó para mí. Tenga en cuenta que configuré un alias de paquete web para la ruta relativa

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

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

<div style={BackgroundHead}>

Como dijo Romainwn, debe importar la imagen al archivo. Asegúrese de usar la ruta relativa al padre, por lo que en lugar de

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

Hacer

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

Otro truco para hacerlo sería agregar una etiqueta de estilo en línea al componente:

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>
        )
    }
}

Puedes usar accesorios sx en MUI v5

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>
        )
    }
}