es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo mostrar la imagen de fondo una vez que se asigna como constante usando componentes estilizados.

Cómo mostrar la imagen de fondo una vez que se asigna como constante usando componentes estilizados.

01 Jun, 2023 Programación

Quiero mostrar una imagen de fondo en todo el tamaño del componente padre, esta imagen está asignada a la constante “image”, el padre es un Dialog de Material UI. A continuación se muestra el código que tengo ahora y que no funciona. ¿Cómo debo implementarlo?

const image = ‘../../../../../../shared/src/lib/assets/images/logo/SVG/nevomo_logo_orange.svg’;
return (

sss

);

export const StyledDialog = styled(Dialog)& .MuiDialog-paper {
overflow: unset;
height: 50rem;
width: 46.4rem;
border: 0.4rem solid #ffffff;
border-radius: unset;
background-image: ${(props) => props.image};
};

¡Muchas gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar una imagen de fondo en tamaño completo del componente padre (en este caso Dialog de Material UI), asignado a la constante “imagen”, se pueden hacer los siguientes cambios en el código:

    1. Actualizar la constante “imagen” para incluir la URL de la imagen deseada.
    const imagen = 'url(../../../../../../shared/src/lib/assets/images/logo/SVG/nevomo_logo_orange.svg)';
    1. Cambiar el prop “sx” en el componente StyledDialog para usar “backgroundImage” en lugar de “image”.
    sx={{ backgroundImage: imagen }}
    1. Actualizar el componente StyledDialog para usar “background-image” en lugar de “backgroundImage” y eliminar la sintaxis ${props => props.image}.
    export const StyledDialog = styled(Dialog)`
  & .MuiDialog-paper {
    overflow: unset;
    height: 50rem;
    width: 46.4rem;
    border: 0.4rem solid #ffffff;
    border-radius: unset;
    background-image: ${props => props.backgroundImage};
  }
`;

    Después de hacer estos cambios, la imagen de fondo debería mostrarse en tamaño completo del componente padre Dialog.

Comments are closed.