MUI 和 TypeScript：如何使用 !important？

Question

我正在开发ui一个 React 应用程序，我正在为我的组件使用 MUI。我想知道如何给样式赋予 !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 组件。最简单直接的方法是在组件本身上应用一个stlye。内联样式的权重比提供的 css 更具体。你会像这样使用它：

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

如果要正常使用CSS:

import './style.css'

并在组件上提供 class

<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

更简洁的方法是编写辅助方法：

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

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

Answer 4

这似乎对我有用

<Toolbar
        sx={{
          minHeight: '0 !important',
        }}
      />

MUI 和 TypeScript：如何使用 !important？

MUI and TypeScript: How to use !important?

typescript

reactjs

material-ui

jss