使用样式化组件将其分配为常量后如何显示背景图像

Posted 2023-03-15

【中文标题】使用样式化组件将其分配为常量后如何显示背景图像

【英文标题】：How to display backgroung image once it's assigned as constant using styled components

【发布时间】：2022-01-02 09:46:54

【问题描述】：

我想在父组件的全尺寸上显示背景图像，此图像分配给 const "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;
    
`;

非常感谢！

【参考方案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;
    
`;

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

感谢您的建议。我想将这张图片作为 const，因为很快 const image 将是从 Context 传递的数据，因此它将是动态的。目前我想让代码在该方案中工作，图像保存在 const 下，稍后只需更改一些小事情以使其与从上下文中获取的数据一起工作