“应用全局类名”是什么意思？

Question

我正在尝试使用 Material-UI 构建我的界面（当前版本是 3.1.2。）

不久前，当我使用 Bootstrap4 时，我在head标签中添加了style="overflow-y: scroll; height: 100%"以始终显示滚动条以阻止应用在页面内容增长超过屏幕时跳转.

现在我正在尝试使用 Material-UI，当与 Material-UI 的弹出组件（popper、菜单等）结合使用时，溢出设置似乎会导致问题

但我不确定那是要我做什么。 下面的短语“应用全局类”暗示什么？

“应用一个全局的 .mui 固定类名......来处理这些元素。”

他们打算在哪里将mui-fixed添加到我的应用程序中的每个组件中？ 到菜单/popper 的锚点？ 或者他们的意思是我应该“全局”应用它（即在 React 页面组件层次结构中的高处？）

同时，作为一种解决方法，我刚刚从我的html元素中删除了溢出样式。 当内容在页面大小上增长/缩小时，应用程序内容仍然会跳动，但它似乎没有我使用 Bootstrap 时那么难看。

我尝试将mui-fixed类添加到我的主体中，因此当应用程序启动时，它看起来像：

<body style="overflow-y: scroll; height: 100%" class="mui-fixed">

所以当页面很短时，有一个禁用的滚动条。 如果页面增长，滚动条将启用。

然后，在显示菜单弹出窗口时，Material-UI 将其更改为：

<body style="overflow: hidden; height: 100%; padding-right: 17px;" class="mui-fixed">

无论内容的长度如何，这看起来都不错。 但是当菜单被关闭时，Material-UI 将 body 元素更改为：

<body style="height: 100%; padding-right: 0px;" class="mui-fixed">

溢出样式消失了，如果页面内容比窗口短，这会导致滚动条被完全删除 - 因此页面内容“跳跃”以填充缺失滚动条的空间。

Answer 1

这是用于滚动条，如果我理解正确，那么它将“全局”应用一次。

Answer 2

在你的 style.ts 你可以添加：

    '@global': {
      '.mui-fixed': {
        // something here
      },
    },

它将适用于全球！