當屏幕最小化且工作區由兩個單詞組成時，更改卡片的形狀

Question

我有一個項目是為了在公司內組織任務，我有一組必須顯示的工作區，但是在查看卡片時，當屏幕最小化並且只有工作區的名稱由以下內容組成時，卡片的形狀才會改變兩個字。

如圖所示，我有一個名為 Heba Youssef 的工作區，我們注意到屏幕最小化時卡片樣式的形狀發生了變化。

我怎么解決這個問題？

代碼.tsx：

interface WorkspaceCardProps {
    workspace: Workspace;
}

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

const WorkspaceCard: FC<WorkspaceCardProps> = (props) => {

    const { workspace } = props;

    const user = useAuthModule((state) => state.user.user);
  
    console.log('user workspace: ', workspace)

    console.log('user' , user.name)
    const fileSelectedHandler = event => {
        console.log(event)
    }
    

    const navigation =  useNavigate();

    const fileUploadHandler = ()=>{

    }

    return (

        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
                p: 3
            }}

        >
            <Card
                style={{maxWidth: "24rem"}}
                sx={{py: '20px'}}>
                <Box
                     sx={{
                         pl: 3,
                         pr:3,
                         pb:3,
                         pt:2
                     }}

                >

                    <Box
                        sx={{
                            alignItems: 'center',
                            display: 'flex',
                        }}
                    >
                        <Avatar
                            onClick={fileUploadHandler}
                            onChange={fileSelectedHandler}
                            style={{height: "5.6rem", width: "5.6rem"}}
                            alt="Author"
                           src="https://t4.ftcdnA25Jjm2q.jpg"
                            //    src={workspace.author.avatar}
                        >

                        </Avatar>

                        <Box sx={{ml: 2}}>
                                <Link
                                    color="textPrimary"
                                    component={RouterLink}
                                    to="#"
                                    variant="h6"
                                    style={{textAlign: "center", fontSize: "1.9rem", 
                                 paddingLeft: "0.8rem"}}
                                >
                                    {workspace.name}
                                    {/*Slark*/}
                                </Link>


                            <Typography
                                color="textSecondary"
                                variant="body2"
                                style={{textAlign: "center", paddingLeft: "0.8rem"}}
                            >
                                by
                                {'  '}
                                <Link
                                    color="textPrimary"
                                    component={RouterLink}
                                    to="#"
                                    variant="subtitle2"
                                >
                                    {user.name}
                                </Link>

                            </Typography>
                        </Box>
                    </Box>
                </Box>


                <Divider />
                <Box
                    sx={{
                        alignItems: 'center',
                        display: 'flex',
                        pl: 2,
                        pr: 3,
                        pt:2
                    }}
                >
                    <Box
                        sx={{
                            alignItems: 'center',
                            display: 'flex',
                            ml: 2
                        }}
                    >
                        <UsersIcon fontSize="small"/>
                        <Typography
                            color="textSecondary"
                            sx={{ml: 1}}
                            variant="subtitle2"
                        >
                            {/*{workspace.membersCount}*/}
                            4
                        </Typography>


                    </Box>
                    <Box sx={{
                        ml: 2
                    }}
                    >

                        <Button>
                            <a href={`/workspace-settings/settings/${workspace._id}`} >
                            <ViewComfyRoundedIcon  style={{fontSize: 30}}/>
                            </a>
                        </Button>

                    </Box>

                </Box>
            </Card>
        </Box>
    );
};

WorkspaceCard.propTypes = {
    // @ts-ignore
    workspace: PropTypes.object.isRequired
};

export default WorkspaceCard;

Answer 1

我相信您正在使用Grid組件。 您應該為xs 、 sm 、 md 、...指定更高的值。您必須猜測工作區名稱通常有多長並相應地設置值。

您可以考慮的另一種方法是添加noWrap以下內容：

<Link
  color="textPrimary"
  component={RouterLink}
  to="#"
  variant="h6"
  style={{
    textAlign: "center", fontSize: "1.9rem",
    paddingLeft: "0.8rem"
  }}
  noWrap
>
  {workspace.name}
</Link>

盡管我不確定這是否是一個好的 UI 設計，因為您幾乎沒有空間來顯示可能很長的文本。