Is there a way to change only the box-shadow color for mui Paper component. I made my background black so it's shadow is not visible
I've used
createMuiTheme({
overrides: {
MuiPaper: {
root: {
boxShadow: "0 1px 6px 1px blue"
}
}
}
}
as you can see when I give that boxShadow setting every elevation from 0 to 24 uses it
What I need is a way to change just the shadow color, thanks for your help
You can change the shadow color , but for a specific elevate you will need to change values if you are using sass or css to over ride , using withStyle you can do it like this
Refer this sandbox
https://codesandbox.io/s/infallible-platform-kemqg?file=/src/App.js:0-682
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(16),
boxShadow:
"0px 3px 1px -2px red,0px 2px 2px 0px rgba(100,0,0,0.9),0px 1px 5px 0px rgba(0,0,0,0.12)"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Paper elevation={2} />
<Paper elevation={4} />
<Paper elevation={3} />
</div>
);
}