Material UI - Typography fontSize

Question

Recently I upgraded my material UI version from 3.9.4 to 4.11.0, I had to replace these on the theme style override:

to avoid these warnings:

But I require to put that fontSize styles wit !important since that's working on a widget which is rendered on different web pages and if I don't use the !important, then the styles are overritten by the ones of the page, Is there a way to use !important label on the typography fontSize style on the latest versions?

I tried using fontSize: `16 !important`, and fontSize: [[16], ['!important'] without success.

any help would be welcome, Thanks in advice!!!

EDIT: On the override part it receives the styles even as a string but on the typography part, even using @Ryan Cogswell suggestion, it still throw me the same warning

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',
  },
});

Misfire

fontSize: '0.8rem !important' worked for me – Eddyede

Answer 1

The syntax you want is fontSize: [16, "!important"]. It also works to put the 16 within an array, but you can't put "!important" in an array.

Here's a working example:

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 Documentation: https://cssinjs.org/jss-syntax?v=v10.4.0#modifier-important

Roadability

Thanks for your answer, I tried what you said, but I got the same warning when using that syntax so the style isn't applied – Misfire

There is no warning in the code sandbox that I provided in my answer and the !important modifier is present in the styles. If you are getting a warning, then you are doing something different than in my example. – Roadability

Please include your updated code (the version where you tried what I said) in your question (as text, not as an image). – Roadability

On the typography part, you should just use fontSize: 16. That isn't used directly by Material-UI for any styling, so it doesn't make sense to try to add !important there. – Roadability

Since this component is rendered in other pages as a widget, that pages override my styles with their own ones, that's why I have to use !important on several styles – Misfire

@LorenzoZuluaga I understand that, but theme.typography.fontSize isn't used directly in any Material-UI components, so it isn't necessary on that particular one and it seems that is the only one that is still causing an error. – Roadability

ok understood, thank you very much for your help, on the other styles what you suggested worked perfectly! – Misfire