Question

最近，我将材料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({
  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

材质UI-版式fontSize

1 个答案: