材质UI-版式fontSize

编程问答 2022-06-09

问题描述

最近，我将材料UI版本从3.9.4升级到4.11.0，我不得不在主题样式替代中替换它们：

enter image description here

为避免这些警告：

enter image description here

但是我需要将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,fontSize: "16px !important",subtitle1: {
        fontFamily: 'Arial',MuiTablePagination: {
      toolbar: {
        fontSize: "14px !important",}
    },MuiAutocomplete: {
      root: {
        paddingLeft: "15px",paddingRight: "15px",groupLabel: {
        fontWeight: 700,color: "black",fontSize: "14px !important",option: {
        paddingTop: "0px",paddingBottom: "0px",height: "25px"
      }
    }
  },status: {
    danger: 'orange',});

解决方法

所需的语法为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({
  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>
  );
}

Edit fontSize override important

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

jssmaterial-uireactjsreactjsreactjsreactjs