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

Question

我正在尝试将此 CSS class 添加到 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 未定义。

我真的看不出这种样式与 makeStyles 和 Material-UI[ 的所有其他 class 有任何优势=39=]：你不仅要改变语法来适应JavaScript语法还有一些不存在的属性！卧槽！

好吧，抨击够多了，所以我只是重写了组件样式：

所以，我去了这个组件的文档：CardMedia from Material-UI，根据它我应该能够覆盖 css图片标签的 class：.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

您可以覆盖任何 material 组件的 css 就像这样

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

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

我在下面添加了这个 link，请检查并更新它是否适合你。

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

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

Styles on Material-UI: Undefined CSS fields

javascript

css

reactjs

material-ui