Applying box-shadow on in Material UI

Question

How would I be able to apply box-shadow on a <Grid> in Material UI? I've read the official documentation on Shadows - Material UI, but I don't understand how to apply this on a <Grid>.

I've researched this problem thoroughly, and still, I have no answers.

Code

Thank you!

I think GRID does not support boxShadow property. You can add your shadow inside css and apply it to a class that you then add to the GRID element. — Mihai T, Aug 23 '21 at 11:28
@MihaiT how would I do that? Would I do something like `
` or...? Is there an easier way of doing that? — Wolfizzy, Aug 23 '21 at 11:29
Well take a look at the DOCs demo on material UI grid. https://codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js — Mihai T, Aug 23 '21 at 11:30
I just tried adding that to all of my grids, and did them like ``, because that's what the code in the sandbox did. @MihaiT — Wolfizzy, Aug 23 '21 at 11:34
That was just to show you that it doesn't work :)) I removed the `boxShadow` now. Just add a classname in the styles. ( or edit the root one ) and add that className to your grid. I will post an asnwer in a min — Mihai T, Aug 23 '21 at 11:37

Mihai T · Accepted Answer · 2021-08-23T11:57:41.310

2

boxShadow property is supported ( i presume ) only by Boxelements. So in order to add a shadow to a Grid, you can define it in css inside a class and add that class to the Grid.

See below trimmed down example code

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>
  )
}

edited Aug 23 '21 at 11:57

answered Aug 23 '21 at 11:41

Mihai T

17,254
2
23
32

Thank you so much for your help! Unfortunately this is what happens: https://ibb.co/VHyxFVT – Wolfizzy Aug 23 '21 at 11:47
1

my bad :) it should've been `boxShadow` instead of box-shadow and the value between quotes. Check edited answer – Mihai T Aug 23 '21 at 11:50
Thank you :) But it still doesn't work, I have other code here `const classes = useStyles();` and it gave me an error saying `ReferenceError: Cannot access 'useStyles' before initialization` – Wolfizzy Aug 23 '21 at 11:55
1

did you declare useStyles before the component ? like shown in the demo docs and in the code i shared ? did you import makeStyles ? `import { makeStyles } from "@material-ui/core/styles";` Please share the code of you component ( inside the question ) – Mihai T Aug 23 '21 at 11:57
Tip: You should change the `;` inside `boxShadow` to `,` :D – Wolfizzy Aug 23 '21 at 11:57
And yes, I imported `makeStyles`. I did declare `useStyles` before the component... – Wolfizzy Aug 23 '21 at 11:59
1

The code from the component where you use the GRID and the Styles . But just the relevant one. Something like i posted in my answer . You can also paste the WHOLE code here -> https://codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js:27-81 , save it, and share it back to me here in the comments – Mihai T Aug 23 '21 at 12:00
But if I move the `useStyles` variable above it, the whole CSS on the website goes crazy. – Wolfizzy Aug 23 '21 at 12:00
1

Yes. Please share all the code you have in the component ( if there is no sensitive stuff ) inside a codesanbox ( eg here https://codesandbox.io/s/material-demo-forked-cw34f?file=/demo.js:27-81) , save it, and share it back with me here in the coments – Mihai T Aug 23 '21 at 12:01
Can you see this? https://codesandbox.io/s/9wj2z?file=/src/App.js – Wolfizzy Aug 23 '21 at 12:02
1

Yes, why do you have `import useStyles from "./styles"; ` ? if you have useStyles somewhere in a `styles` file, add the ` gridClassName: { boxShadow: "5px 10px red" }` and do not add it in the component. Just import the useStyles like you do. Delete the other useStyles you added now – Mihai T Aug 23 '21 at 12:05
I deleted the `useStyles` import, and I don't use `useStyles` anywhere else in the file. Except, if I deleted the `classes` const, I get a lot of errors. – Wolfizzy Aug 23 '21 at 12:08
1

If you delete the useStyles import, then declare the useStyles BEFORE the component and `classes=useStyles()` INSIDE the component. Like this : ```const useStyles = makeStyles((theme) => ({ gridClassName: { boxShadow: "5px 10px red" } })); const App = () => { const classes = useStyles(); ``` Check here https://codesandbox.io/s/reverent-pasteur-5fe16?file=/src/App.js – Mihai T Aug 23 '21 at 12:09
I did that (I updated my code in the sandbox), and this is what happened: https://ibb.co/R3vfT6v – Wolfizzy Aug 23 '21 at 12:12
1

Yep.That's a red shadow :) you need to style that shadow a bit . You can use a shadow generator if you want https://cssgenerator.org/box-shadow-css-generator.html – Mihai T Aug 23 '21 at 12:14
...what about my website? – Wolfizzy Aug 23 '21 at 12:19
1

what do you mean ? Just style that shadow how you need it to look like. The question was how to add a shadow to a grid, right ? Also, i see that you have elements where you added ```className={classes.mobile} className={classes.gridClassName}``` . That's incorrect and might be the cause your website doesnt look good. To add multiple classes use just one ```className= { `${classes.mobile} ${classes.gridClassName}`}``` check this answer https://stackoverflow.com/questions/46066675/how-to-add-multiple-classes-in-material-ui-using-the-classes-props – Mihai T Aug 23 '21 at 12:23

Applying box-shadow on in Material UI

1 Answers1