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

Material UI - 排版字体大小

Material UI - Typography fontSize

reactjs

material-ui

jss