如何显示器的背景下微弱图像，一旦它的分配作为恒定，使用风格的部件

Question 1

我想到显示器的背景图像对全尺寸的父母组件，这种图像是被分配到常数"图像"，父母对话，从材料的用户界面。下面是代码我现在不能工作。我应该怎样实现的？

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

非常感谢！

Question 2

这应该帮助

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

baldhead_dev · Answer 1 · 2021-11-23T23:32:56

这应该帮助

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

因为它是目前写的，你的回答是不清楚。请编辑，以增加额外的详细信息将帮助其他人理解如何解决此问题的要求。你可以找到更多的信息如何编写很好的答案在帮助中心.
谢谢你的建议。我想要这张照片作为常量，因为很快const图像将数据传递，从上下文，因此这将是动态的。目前，我想代码的工作中，方案的形象被保存下const，后来只是改变了轻微的事情，以使它的工作与数据获取从上下文

如何显示器的背景下微弱图像，一旦它的分配作为恒定，使用风格的部件

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别