Material-UI 上的样式：未定义的 CSS 字段

Question

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

bw:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

可以使用makeStyles完成：

import { makeStyles } from '@material-ui/core/styles';

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

但这不起作用，因为grayscale是 undefined 。

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

好吧，足够的抨击，所以我虽然，只是覆盖组件样式：

所以，我去了这个组件的文档：来自 Material-UI 的CardMedia ，根据它我应该能够覆盖图像标签的 css 类： .MuiCardMedia-img ，所以我尝试直接在.MuiCardMedia-img上覆盖它。应用程序的 css 文件，但它再次不起作用：

.MuiCardMedia-img:hover {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

也许我不明白什么，我会很感激任何帮助

Answer 1

您需要将其更改为makeStyles的string ，如下所示：

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

在您的情况下，它正在寻找一个名为grayscale的函数，该函数不存在于您的代码中。 它只是一个CSS属性，这就是您传递给makeStlyles 。

我希望这有帮助！

Answer 2

你可以覆盖任何材质组件的css会像这样

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

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

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

https://codesandbox.io/s/sharp-rubin-4viw0