reactjs - 如何禁用 Material-UI 对比度控制台错误？

Question

我的控制台满是

Material-UI:#5EB44B 上#fff 的对比度为 2.590660811372324:1
低于 WCAG 推荐的绝对最小对比度 3:1。

我想隐藏的错误信息。有办法吗？我已经完成了研究，但可以找到任何有用的东西。

这是我的createMuiTheme代码

createMuiTheme({
  themeName: 'radovix',
  palette: {
    primary: {
      main: '#5EB44B'
    }
  },
  contrastThreshold: 2
});

请注意，我知道最好的方法是更改​​我正在使用的颜色，从而解决错误，但这在我的情况下是不可能的。

Answer 1

此控制台错误由 getContrastText 产生当 contrastText 颜色不是 explicitly specified 时使用.

我建议在默认 contrastThreshold 为 3 的情况下明确指定所需的 contrastText 颜色，而不是指定 contrastThreshold: 2不要选择你想要的那个。 contrastThreshold 的自定义实际上只是为了增加阈值——而不是为了降低它。

这是一个工作示例:

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { common } from "@material-ui/core/colors";
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#5EB44B",
      contrastText: common.white
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">
        Primary Color Button
      </Button>
    </ThemeProvider>
  );
}