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

Question

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

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>

在disabled中div，有Material-UI Button。然而，事实证明他们并不关心pointerEvents他们的父母是否被禁用div，并保持可点击，这是一个大问题。所以，在Buttons 上我必须设置disabled={loading}. 然后，这会使Buttons 本身变暗，这不必要地与opacity的降低相结合disableOnTrue，这意味着我需要添加一些自定义样式来改善这种情况；我希望整个都div被禁用，而不是让它们Button看起来特别禁用。

我还尝试使用Material 中的Backdrop组件，但无法让它调暗除整个视口之外的任何内容。

在我在整个应用程序中实施任何形式的黑客解决方案之前，我想我应该在这里询问是否有一种干净的方法来实现我所缺少的这一点。我已经找了很长一段时间了，但没有找到任何东西。

Answer 1

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

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

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

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