How to display backgroung image once it’s assigned as constant using styled components


I want to display background image on full size of the parent component, this image is assigned to const "image", parent is Dialog from Material UI. Below is the code which I have now and not working. How should I implement it ?

const image =
        '../../../../../../shared/src/lib/assets/images/logo/SVG/nevomo_logo_orange.svg';
    return (
        <div>
            <StyledLogo onClick={handleClickOpen} />
            <StyledDialog
                onClose={handleClose}
                aria-labelledby="alert-picture-zoom-in"
                open={open}
                sx={{ backgroundImage: { image } }}
            >
                <StyledImageContent>sss</StyledImageContent>
                <StyledCloseIcon onClick={handleClose} />
            </StyledDialog>

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};
    }
`;

thanks a lot !

Source: React – Stack Overflow

November 23, 2021
Category : News
Tags: material-ui | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.