Material UI和TypeScript：如何使用！重要吗

mf98qq94 于 2023-05-30 发布在 TypeScript

关注(0)|答案(4)|浏览(258)

我正在构建一个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

当使用material-ui和TypeScript时，如何分配!important标志？

typescript

来源：https://stackoverflow.com/questions/53151340/material-ui-and-typescript-how-to-use-important

4条答案

按热度按时间

woobm2wo1#

你可以直接施法。例如：

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

或者是

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

这里有一个操场的例子。

赞(0）回复(0）举报 2023-05-30

t9eec4r02#

一个更简洁的方法是写一个helper方法：

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

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

赞(0）回复(0）举报 2023-05-30

roqulrg33#

这个好像对我有用

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

赞(0）回复(0）举报 2023-05-30

xwbd5t1u4#

有几种方法可以重写MUI组件的样式。最简单和直接的方法是在组件本身上应用样式。内联样式比所提供的CSS更有特色。你可以这样使用它：

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

如果你想使用普通的CSS：

import './style.css'

并在组件上提供类

<Paper className="left"...>

这样你就可以使用普通的css了

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

我真的建议在你实现它们之前，考虑一下你的风格的具体性和要实现的目标，否则你会开始与MUI风格作斗争，这可能会变得非常糟糕。希望这能有所帮助，快乐编码;- ）

赞(0）回复(0）举报 2023-05-30

我来回答

Material UI和TypeScript：如何使用！重要吗

4条答案

相关问题

热门标签

最新问答