material-ui and TypeScript: How to use !important?

reactjs typescript material-ui jss
J. Hesters picture J. Hesters · Nov 5, 2018 · Viewed 12.3k times · Source

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?

Answer

trusktr picture trusktr · Jan 18, 2019

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.

Related questions

What does the error "JSX element type '...' does not have any construct or call signatures" mean?

I wrote some code: function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } I'm getting an error: JSX element type Elem does not have any construct or call signatures …

Read More
How to setup Material-UI for React with Typescript?

I've run in some problems add Material UI to my React project, which is programmed with Typescript. According to the tutorial, I start with adding the react-tab-event-plugin first. import injectTapEventPlugin from 'react-tap-event-plugin'; // Needed for onTouchTap // Can go away when react 1.0 …

Read More
Formik and Material-UI

I am trying to use Formik with Material-UI text field. Like so: import TextField from '@material-ui/core/TextField'; import { Field, FieldProps, Form, Formik, FormikErrors, FormikProps } from 'formik'; import React, { Component } from 'react'; interface IMyFormValues { firstName: string; } class CreateAgreementForm extends …

Read More