纸张的自定义阴影颜色

Question

有没有办法只更改 mui Paper 组件的框阴影颜色。我把背景设为黑色，这样就看不到阴影了

我用过

createMuiTheme({
  overrides: {
     MuiPaper: {
       root: {
        boxShadow: "0 1px 6px 1px blue"
       }
     }
   }
 }

正如你所看到的，当我给出 boxShadow 设置时，从 0 到 24 的每个高度都会使用它

我需要的是一种只改变阴影颜色的方法，感谢您的帮助

Answer 1

您可以更改阴影颜色，但对于特定的提升，如果您使用 sass 或 css 覆盖，则需要更改值，使用 withStyle 您可以这样做

参考这个沙箱

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