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