css - css网格交替行颜色并放置一个box-shadow
问题描述
我使用 Grid 创建包含大量信息的价格表，但我需要更改一些行背景颜色并应用框阴影。我使用对样式组件做出反应。
我怎样才能改变我的表的一些行？当在我的 XML 中放置背景颜色时，“lorem ipsun”背景会发生变化，但整行不会。我需要做什么？
OBS：那个 textHTML 是我用来制作样式的个人组件。使用样式组件创建它（ width: ${p => p.width }; ）
我现在的网格表： 我的表
我想做的事：
我的 CSS
export const Grid = styled.div`
display: grid;
justify-items: center;
grid-template-columns: 400px 180px 180px 180px;
grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
grid-row-gap: 14px;
grid-template-areas:
'VZ SN SN SN'
'IL PP PP PP'
'IL II II II'
'IL IC IC IC'
'IL IC IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IC IC'
'IL IX IX IC'
'IL IX IX IC'
'IL IX IX IC'
'IL IX IX IC'
'IL IX IX IC';
height: 80vh;
`;
我的 REACT-XML
<Grid>
<TextHTML font="700 18px Roboto" color="white">1</TextHTML>
<TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>
<TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>
<TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;" >lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">R$ 0,00</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">R$ 39,00</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">R$ 89,00</TextHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto" > <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum (Outbound)</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum (Inbound)</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
<TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<TextHTML font="700 12px Roboto">X</TextHTML>
<IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
</Grid>
解决方案
推荐阅读
- javascript - 从 javascript 创建 Bootstrap 轮播项目
- rust - 获取对 Vec 元素的可变引用或创建新元素并获取该引用
- tensorflow - 带有 tensorflow 的 GPU 内存不足深度学习 UNET 网络。如何解决？
- excel - 数据验证 - 与 EXACT 公式的列表组合
- c# - Postgres GENERATED AS IDENTITY 与 .NET 实体模型冲突
- python - 如何获取弹性搜索页面增量元素
- autohotkey - 自动热键：绑定
至 在保留某些行为的同时 - excel - 具有过滤值范围的 SUMIF
- c# - 我很想解决我程序中的未知问题
- spring - Azurite 只能使用 http？