javascript - Material UI Card box-shadow 被截断
问题描述
使用 Material UI 的卡片时。我遇到了一个我通常没有的问题。在底部和顶部手边被切断的盒子阴影..
我怎样才能解决这个问题?
我的代码在这里:
import React, { Component } from 'react'
import './demo.css'
import { Card } from '@material-ui/core';
export default class MasonryLayout extends Component {
render() {
return (
<div className="masonry">
<Card className="item" style={{height:"120px"}} elevation={4}/>
<Card className="item" style={{height:"190px"}} elevation={4}/>
<Card className="item" style={{height:"220px"}} elevation={4}/>
<Card className="item" style={{height:"130px"}} elevation={4}/>
<Card className="item" style={{height:"140px"}} elevation={4}/>
</div>
)
}
}
.masonry {
column-count: 2;
column-gap: 56px;
margin: 50px;
}
.item {
margin-bottom: 40px;
break-inside: avoid;
}
截图自爆:
解决方案
我遇到过同样的问题。我通过在底部/侧面添加“足够”的边距来解决它。
注意 根据您的海拔,仅添加 1-2 像素是不够的。对我来说,我必须为海拔 5 添加 m={1.25}。如果只添加少量边距,阴影看起来不自然,看起来就像盒子里的阴影。您只需要添加更多边距即可使其看起来符合预期。
推荐阅读
- ios - 在 SwiftUI 中的视图之间切换
- c++ - 仅当我在运行时不使用 sudo 时,某个程序才有效
- c# - 使输入框只接受英文字母、数字和符号
- github - 如何在 github 中显示来自 azure devops 的单元测试结果
- java - Javac 忽略源路径文件的第一行并且不编译类
- python - 合并具有相同列的数据框
- python - 在单个语句中打印 str 和 int
- html - 不要在带有 boostrap v4.5.3 的 safari 浏览器上显示导航栏元素
- android - 来自Android App的Firebase Cloud Function未定义请求查询参数
- cakephp - 我可以在 CakePHP 3 中使用 FormHelper 在标签后添加一个“跨度”吗?