Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MUI and TypeScript: How to use !important?

I'm building a React application and I'm using MUI 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?

like image 973
J. Hesters Avatar asked Nov 05 '18 09:11

J. Hesters


People also ask

Can I use material UI with TypeScript?

Material-UI requires a minimum version of TypeScript 3.2. Have a look at the Create React App with TypeScript example. The strict mode options are the same that are required for every types package published in the @types/ namespace. Using a less strict tsconfig.

Does MUI use Emotion?

By default, MUI components come with Emotion as their style engine. If, however, you would like to use styled-components , you can configure your app by following the styled engine guide or starting with one of the example projects: Create React App with styled-components.

Is Emotion required for material UI?

Note: @emotion/react , @emotion/styled , and styled-components are optional peer dependencies of @mui/material , so you need to install them yourself.


1 Answers

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.

like image 72
trusktr Avatar answered Sep 29 '22 21:09

trusktr