reactjs - 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フラグをどのように割り当てますか？

回答 #1

そのままキャストすることができます。例えば：

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

または

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

こちらは遊び場の例です。

回答 #2

よりきれいな方法は、ヘルパーメソッドを書くことです:

function important<T>(value: T): T {
  return (value + ' !important') as any;
}

const MyComponent = styled('div')({
  fontWeight: important('bold'),
});