css - "apply a global class name"是什么意思？-6ren

css - "apply a global class name"是什么意思？

转载作者：行者123 更新时间：2023-12-05 07:29:24

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

不久前，当我使用 Bootstrap4 时，我将 style="overflow-y: scroll; height: 100%" 添加到我的 head 标签中，以始终显示一个当页面内容变得比屏幕长时，滚动条会阻止应用跳来跳去。

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

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

"apply a global .mui-fixed class name ... to handle those elements."

他们打算在哪里将 mui-fixed 添加到我的应用程序中的每个组件？到菜单/波普尔的 anchor ？或者他们的意思是我应该“全局”应用它(即，在 React 页面组件层次结构的高层？)

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

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

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

所以当页面很短的时候，有一个disabled scrollbar。如果页面变大，滚动条将启用。

然后，在显示菜单弹出窗口时，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">

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

最佳答案

如果我弄对了，这是滚动条的，那么它将“全局”应用一次。

关于css - "apply a global class name"是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52799402/

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章