Question

我正在构建一个React应用程序，并且正在使用material-ui作为我的组件。我想知道如何为样式赋予!important属性？

我尝试过：

<Paper className="left"...>

我正在使用withStyles and 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

将Material-ui与TypeScript一起使用时，如何分配!important标志？

Answer 1

有几种方法可以夸大MUI组件的样式。最简单直接的方法是在组件本身上应用线条。内联样式的权重比提供的css更明确。您将这样使用它：

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

如果您想使用普通的CSS：

import './style.css'

并在组件上提供一个类

<Paper className="left"...>

这样，您将可以使用普通的CSS，例如

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

我真的建议您在实施样式之前先考虑样式的特殊性以及如何实现样式，否则您将与MUI样式展开斗争，这会变得很讨厌。希望这会有所帮助，编码愉快；-）

Answer 2

您可以投射它。例如：

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

或

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

这里是playground example。

Answer 3

只需在property和lexer.skip(1)之间使用空格。

!important

我遇到了同样的问题，然后我做到了，并且奏效了。

material-ui和TypeScript：如何使用！important？

3 个答案: