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

Question

在我的应用程序中，我有 divs，我想根据组件状态（例如加载）来调暗和禁用鼠标事件。我想出的初始方法是有一个辅助函数，它返回一个内联样式，用于调暗元素并禁用其上的指针事件，给定一个布尔值：

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 Buttons。然而，事实证明，他们并不关心 pointerEvents 是否在其父 div 上被禁用，并且仍然可点击，这是一个大问题。所以，在Buttons 我必须设置disabled={loading}。然后，这会使Buttons 本身变暗，这不必要地与disableOnTrue 的降低opacity 复合，这意味着我需要添加一些自定义样式来改善它；我希望整个div 被禁用，而不是让Button 看起来特别禁用。

我也尝试过使用 Material 中的 Backdrop 组件，但除了整个视口之外，无法让它变暗。

在我在整个应用程序中实施任何类型的 hacky 解决方案之前，我想我应该在这里询问是否有一种干净的方法来实现我所缺少的。找了好久都没找到。

Answer 1

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

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

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

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