0

Buenas noches estoy desarrollando un ToDo App en react con material-ui, y quiero que mi Navbar tenga una imagen de fondo, pero no encuentro una propiedad para hacerlo, ¿saben si existe alguna propiedad para hacerlo? Aquí coloco el código de mi componente, esperando me puedan ayudar, muchas gracias.

import React from 'react';
import {AppBar, Toolbar, Typography, makeStyles} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    offset: theme.mixins.toolbar,
    root: {
        flexGrow: 1,
    },
    toolbar: {
        minHeight: 128,
        alignItems: 'flex-start',
        paddingTop: theme.spacing(1),
    },
    title:{
        flexGrow: 1,
        alignSelf: 'flex-end',
    },
}));

const Navbar = () => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <AppBar position='static'>
                <Toolbar className={classes.toolbar}>
                    <Typography className={classes.title} variant='h2'>
                        MI DÍA
                        <Typography className={classes.subtitle} variant='h6'>
                            Fecha
                        </Typography>
                    </Typography>
                </Toolbar>
            </AppBar>
                <div className={classes.offset}></div>
        </div>
    )
}

export default Navbar

2
  • 1
    En react las clases tienen que ponerse de forma distinta. Todas existen solo que no puedes usar el guión medio. ¿Has intentado usar backgroundImage en lugar de background-image?
    – Jacobo
    Commented el 17 ago. 2021 a las 3:53
  • Muchas gracias, si ese era el error, ya pude cargar la imagen. Commented el 17 ago. 2021 a las 5:22

1 respuesta 1

1

En react puedes asignar una imagen de fondo como en el siguiente ejemplo:

<div style={{ 
     backgroundImage: `url("https://via.placeholder.com/500")` 
}}>

Un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.