Reactjs 纸张的自定义阴影颜色

是否有方法仅更改mui纸张组件的框阴影颜色。我将背景设置为黑色，因此它的阴影不可见

我用过

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

正如我给boxShadow设置时看到的，从0到24的每个标高都使用它

---

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

你可以改变阴影颜色，但是对于一个特定的提升，如果你使用sass或css来超越，你需要改变值，使用withStyle你可以这样做

参考这个沙箱

导入“/styles.css”； 从“@material ui/core/styles”导入{makeStyles}”； 从“@material ui/core/Paper”导入纸张； const useStyles=makeStyles（（主题）=>({ 根目录：{ 显示：“flex”， 柔性包装：“包装”， "& > *": { 边距：主题。间距（1）， 宽度：主题。间距（16）， 高度：主题。间距（16）， boxShadow： 0px 3px 1px-2px红色，0px 2px 2px 0px rgba（100,0,0.9），0px 1px 5px 0px rgba（0,0,0.12） } } })); 导出默认函数App（）{ const classes=useStyles（）； 返回( ); }

---

您找到解决方案了吗？没有，还是希望如此。我所能做的是使其变亮或变暗，除此之外没有其他选择答案，但您必须对所有组件继续执行此操作，这将改变每个标高值不同类（如标高0、标高1）的标高材质ui使用标高，而不是我们可以使用scss global覆盖特定的标高或所有标高

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