如何在使用样式化组件将背景图像指定为常量后显示背景图像

Question

我想在父组件的全尺寸上显示背景图像，此图像已分配给常量“image”，父组件是来自 Material UI 的 Dialog。下面是我现在没有工作的代码。我该如何实施？

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

非常感谢！

Answer 1

这应该有帮助

import styled from 'styled-components';
import img from 'your path to image';

export const StyledDialog = styled(Dialog)`
    background-image: url(${img});
    width: 100%;

    & .MuiDialog-paper {
        overflow: unset;
        height: 50rem;
        width: 46.4rem;
        border: 0.4rem solid #fff;
        border-radius: unset;
        background-image: ${(props) => props.image};
    }
`;

如何在使用样式化组件将背景图像指定为常量后显示背景图像

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

reactjs

material-ui

styled-components