Javascript 材质UI上的样式：未定义的CSS字段

我正在尝试将此CSS类添加到Material UI中的元素：

悬停{ -webkit过滤器：灰度100%；/*Safari 6.0-9.0*/ 过滤器：灰度100%； } 可以使用makeStyles完成：

从'@material ui/core/styles'导入{makeStyles}； const useStyles=makeStyles{ 体重：{ 过滤器：灰度“100%”， }, }; 但这不起作用，因为灰度未定义

我真的没有看到使用makeStyles和Material UI中的所有其他类进行这种样式设计的任何优势：您不仅需要更改语法以使其适应JavaScript语法，还有一些属性不存在！wtf

好了，够了，所以我想，只需覆盖组件样式：

因此，我访问了该组件的文档：根据Material UI，我应该能够覆盖图像标记的css类：.MuiCardMedia img，因此我尝试直接在应用程序的.css文件上覆盖它，但它仍然不起作用：

.MuiCardMedia img：悬停{ -webkit过滤器：灰度100%；/*Safari 6.0-9.0*/ 过滤器：灰度100%； }

---

也许我不明白什么，我将感谢您的帮助

您需要在makeStyles中将其更改为字符串，如下所示：

const useStyles = makeStyles({
  bw: {
    filter: `grayscale('100%')`,
  },
});

在您的例子中，它正在寻找一个名为grayscale的函数，该函数在您的代码中不存在。它只是一个CSS属性，这就是传递给MakeStyles的方式

---

我希望这有帮助

您可以覆盖任何材质组件的css，如下所示

const style = {
  newMedia: {
    //css property
  }
}

<CardMedia classes={{media: classes.newMedia}} />

我在下面添加了此链接，请检查并更新此链接是否适用于您

---

谢谢，仍然这个效果不适用于img，为什么以及如何实现它？仍然，我无法在img上应用效果，因为它是一个背景，我想，我应该在哪里应用它？我编辑了我的答案，请检查答案中提到的链接