web-dev-qa-db-ja.com

material-uiとTypeScript：！importantの使い方

Reactアプリケーションを構築していて、コンポーネントにmaterial-uiを使用しています。スタイルに!importantプロパティを指定するにはどうすればよいですか？

私はこれを試しました：

<Paper className="left"...>

withStylesおよびWithStyles を使用しています。次に、私のstyles.ts：

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

しかし、これはエラーをスローします：

[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

TypeScriptでmaterial-uiを使用する場合、!importantフラグをどのように割り当てますか？

reactjstypescriptmaterial-uijss
7
J. Hesters

そのままキャストできます。例えば：

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

または

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

これが 遊び場の例 です。

1
trusktr

mUIコンポーネントをオーバースタイルする方法はいくつかあります。最も簡単で簡単なのは、コンポーネント自体にスタイルを適用することです。インラインスタイルの重みは、指定されたCSSよりも詳細です。次のように使用します。

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

通常のCSSを利用したい場合：

import './style.css'

コンポーネントのクラスを提供します

<Paper className="left"...>

これにより、次のような通常のCSSを使用できるようになります

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

実装する前に、具体性とスタイルで何を達成するかについて考えることを強くお勧めします。そうしないと、MUIスタイルとの戦いが始まり、これはかなり厄介なものになる可能性があります。うまくいけば、これが幸せなコーディングに役立ちます;-)

0
Paulquappe

プロパティと!importantの間にはスペースを入れてください。

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

私は同じ問題を抱えていましたが、これを実行しました。

0
Davood V