Material UI - 排版字体大小

Question

最近我将 Material UI 版本从 3.9.4 升级到 4.11.0，我不得不在主题样式覆盖上替换这些：

要避免这些警告：

但我需要将 fontSize 样式设置为 !important，因为它适用于在不同网页上呈现的小部件，如果我不使用 !important，则样式会被页面的样式覆盖，有没有办法在最新版本的排版 fontSize 样式上使用 !important 标签？

我尝试使用 fontSize: `16 !important`, 和 fontSize: [[16], ['!important'] 没有成功。

欢迎任何帮助，谢谢您的建议！！！

编辑： 在覆盖部分，它接收样式甚至作为字符串，但在 typography 部分，即使使用@Ryan Cogswell 建议，它仍然给我同样的警告

const Theme = createMuiTheme({
  root: {
    display: 'flex',
  },
  palette: {
    primary: {
      main: '#052d4f',
    },
    secondary: {
      main: '#2376b8',
    },
  },
  typography: {
    fontFamily: 'Arial, Helvetica, sans-serif !important',
    fontSize: [16, "!important"],
  },
  overrides: {
    MuiTypography: {
      body2: {
        fontFamily: 'Arial, Helvetica, sans-serif !important',
        fontSize: "16px !important",
      },
      subtitle1: {
        fontFamily: 'Arial',
        fontSize: "16px !important",
      },
    },
    MuiTablePagination: {
      toolbar: {
        fontSize: "14px !important",
      }
    },
    MuiAutocomplete: {
      root: {
        paddingLeft: "15px",
        paddingRight: "15px",
      },
      groupLabel: {
        fontWeight: 700,
        color: "black",
        fontSize: "14px !important",
      },
      option: {
        paddingTop: "0px",
        paddingBottom: "0px",
        fontSize: "14px !important",
        height: "25px"
      }
    }
  },
  status: {
    danger: 'orange',
  },
});

Answer 1

你想要的语法是fontSize: [16, "!important"]。将16 放入数组中也可以，但不能将"!important" 放入数组中。

这是一个工作示例：

import React from "react";
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const theme = createMuiTheme({
  //v5.0.0
  typography: {
    body2: {
        fontSize: [16, "!important"]
    }
  },
  //older versions
  overrides: {
    MuiTypography: {
      body2: {
        fontSize: [16, "!important"]
      }
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Typography variant="body2">Hello CodeSandbox</Typography>
      </div>
    </ThemeProvider>
  );
}

JSS 文档：https://cssinjs.org/jss-syntax?v=v10.4.0#modifier-important