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 =
    return (
            <StyledLogo onClick={handleClickOpen} />
                sx={{ backgroundImage: { image } }}
                <StyledCloseIcon onClick={handleClose} />

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.