web-dev-qa-db-fra.com

material-ui et TypeScript: Comment utiliser! important?

Je construis une application React et j'utilise material-ui pour mes composants. Je me demande comment je peux donner un !important propriété à un style?

J'ai essayé ceci:

<Paper className="left"...>

J'utilise withStyles et WithStyles . Puis dans mon styles.ts:

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

Mais cela jette l'erreur:

[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

Comment attribuer un !important flag lors de l'utilisation de material-ui avec TypeScript?

reactjstypescriptmaterial-uijss
7
J. Hesters

Vous pouvez simplement le lancer. Par exemple:

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

ou

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

Voici un exemple de terrain de je .

1
trusktr

il existe plusieurs façons de surestimer un composant MUI. Le plus simple et le plus direct consiste à appliquer un stlye sur le composant lui-même. un style en ligne pèse plus de spécificité que le CSS fourni. Vous l'utiliseriez comme ceci:

<Paper style={{display: 'block'}}...>

Si vous souhaitez utiliser le CSS normal:

import './style.css'

et fournir une classe sur le composant

<Paper className="left"...>

Par cela, vous pourrez utiliser des CSS normaux comme

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

Je recommande vraiment de penser à la spécificité et à ce qu'il faut réaliser avec vos styles avant de les implémenter, sinon vous commencerez une lutte contre les styles MUI et cela peut devenir assez désagréable. J'espère que cela aide, codage heureux ;-)

0
Paulquappe

Utilisez simplement un espace entre la propriété et !important.

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

J'ai eu le même problème, puis j'ai fait ça et ça a marché.

0
Davood V