reactjstypescriptmaterial-uijss

Material UI and TypeScript: How to use !important?

I'm building a React application and I'm using Material UI for my components. I wonder how I can give an !important property to a style?

I tried this:

<Paper className="left"...>

I'm using withStyles and WithStyles. Then in my styles.ts:

left: {
  display: "block",
  float: "left!important",
},

But this throws the error:

[ts] Type '"left!important"' is not assignable to type '"right" | "none" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined'.
index.d.ts(1266, 3): The expected type comes from property 'float' which is declared here on type 'CSSProperties'
(property) StandardLonghandProperties<TLength = string | 0>.float?: "right" | "none" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined

How would one assign an !important flag when using material-ui with TypeScript?

Solution

  • You can just cast it. For example:

    left: {
  display: "block",
  float: "left!important" as any,
},

    or

    left: {
  display: "block",
  float: "left!important" as "left",
},

    Here's a playground example.