小编Nic*_*key的帖子

在我的项目中,我使用Material-ui组件以及react-emotion.

让我举一个有问题的例子.我有这个元素:

<CardHeader title={stat} classes={{ root: statNumber }}/>

哪里

const statNumber = css`padding: 0;`

这样我就可以覆盖CardHeader的默认填充(16px)0,这是我的意图.

在开发模式下,一切都按预期工作,但在生产中,填充:0规则被默认填充16px覆盖.

发生这种情况的原因是在开发模式下,样式会动态添加到标题中.首先是Material-UI样式,然后是情感样式.像这样:

但在制作中,风格却是相反的

这就是在生产模式中覆盖样式的原因.

材料ui对此https://material-ui-next.com/customization/css-in-js/#css-injection-order提供了解释

但是随着解决方案的提出,我无法改变情感和材料的顺序 - ui风格是有序的.我只能改变材料ui并将其向下移动

任何人都知道如何解决这个问题？

我正在尝试在 Typescript 中使用 globalThis，我想就如何以更好的方式编写它提出一些建议。
目前的实现是这样的：

创建一个文件types/global.d.ts并在里面添加

interface Global {
   foo: string
}

declare let foo: Global["foo"];

在tsconfig.json添加

"files": [
  "types/global.d.ts"
]

然后，以设定的值foo使用

(globalThis as any).foo = "The value of foo"

我不喜欢这种方法首先是需要样板（但我认为这是无法避免的），其次是(globalThis as any).foo =表达式