html - 在 Material-UI 中调暗/禁用 div 的最佳方法？

Question

在我的应用程序中，我有 div s 我想要调暗和禁用鼠标事件，具体取决于组件状态 - 例如，加载。我想出的初始方法是有一个辅助函数，它返回一个内联样式，用于调暗元素并禁用其上的指针事件，给定一个 bool 值:

const disableOnTrue = (flag) => {
    return {
        opacity: flag ? 0.15 : 1,
        pointerEvents: flag ? "none" : "initial"
    }
}

并在这样的元素上使用它:

{loading && {/** render a loading circle */}}
<div style={disableOnTrue(this.state.loading)}>{/** stuff to be dimmed & disabled while loading */}</div>

在残疾人 div , 有 Material-UI Button s。然而，事实证明他们并不关心 pointerEvents在其父级上被禁用 div ，并保持可点击，这是一个大问题。所以，在 Button s 我必须设置 disabled={loading} .然后，这会使 Button 变暗s 本身，这不必要地与降低的 opacity 复合的 disableOnTrue ，这意味着我需要添加一些自定义样式来改善它；我想要整个 div禁用，不适用于 Button看起来特别残疾。
我也试过使用 Backdrop来自 Material 的组件，但除了整个视口(viewport)之外，无法让它变暗。
在我在整个应用程序中实现任何类型的 hacky 解决方案之前，我想我应该在这里询问是否有一种干净的方法来实现我所缺少的。我已经找了很长时间，但没有找到任何东西。

Answer 1

我将“禁用”的概念分为两​​个功能:

const dimOnTrue = (flag) => {
    return {
        opacity: flag ? 0.15 : 1,
    }
}

const disableOnTrue = (flag) => {
    return {
        pointerEvents: flag ? 'none' : 'initial'
    }
}

分别用于应该变暗的 div 和应该禁用的输入。