在 Material UI 中的 <Grid> 上应用 box-shadow

Posted 2023-02-22

【中文标题】在 Material UI 中的 <Grid> 上应用 box-shadow

【英文标题】：Applying box-shadow on <Grid> in Material UI

【发布时间】：2021-10-23 17:57:23

【问题描述】：

如何在 Material UI 中将 box-shadow 应用于 <Grid>？我已经阅读了Shadows - Material UI 上的官方文档，但我不明白如何在<Grid> 上应用它。

我已经彻底研究了这个问题，但仍然没有答案。

Code

谢谢！

【问题讨论】：

我认为 GRID 不支持 boxShadow 属性。您可以在 css 中添加阴影并将其应用于一个类，然后将其添加到 GRID 元素中。

@MihaiT 我该怎么做？我会做类似<div className="shadow"> 或...的事情吗？有没有更简单的方法？

那么请看一下材质 UI 网格上的 DOC 演示。 codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js

我只是尝试将它添加到我的所有网格中，并像<Grid boxShadow=3> 那样做，因为沙箱中的代码就是这样做的。 @MihaiT

这只是为了告诉你它不起作用:)）我现在删除了boxShadow。只需在样式中添加一个类名。 （或编辑根目录）并将该 className 添加到您的网格中。我会在几分钟内发布一个答案

【参考方案1】：

boxShadow 属性仅由Boxelements 支持（我认为）。所以为了给网格添加阴影，你可以在一个类的css中定义它，然后将该类添加到网格中。

见下面精简的示例代码

const useStyles = makeStyles((theme) => (
  gridClassName: 
    boxShadow: "5px 10px red",
  ,
 // other classes here
));
export default function MyGridComponent() 
  const classes = useStyles();

  return (
    <Grid container className=classes.gridClassName>
      <Grid item> .... </Grid>
    </Grid>
  )

【讨论】：

我的错 :) 它应该是 boxShadow 而不是 box-shadow 和引号之间的值。检查编辑的答案

你在组件之前声明了 useStyles 吗？如演示文档和我共享的代码中所示？你导入了 makeStyles 吗？ import makeStyles from "@material-ui/core/styles";请分享您的组件代码（在问题内）

使用 GRID 和 Styles 的组件中的代码。但只是相关的。像我在我的答案中发布的东西。你也可以在这里粘贴整个代码 -> codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js:27-81 ，保存它，然后在 cmets 中分享给我

是的。请在代码框（例如这里codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js:27-81）内分享您在组件中的所有代码（如果没有敏感内容），保存，并在评论中与我分享

是的，你为什么有import useStyles from "./styles"; ？如果您在 styles 文件中的某处有 useStyles，请添加 `gridClassName: boxShadow: "5px 10px red" ` 并且不要将其添加到组件中。只需像您一样导入 useStyles 即可。删除你现在添加的其他 useStyles