Best way to dim/disable a div in Material-UI?

user_6867216 0
Viewed 3423

In my app, I have divs that I want to dim and disable mouse events for, depending on component state - for example, loading. The initial method I came up with is to have a helper function that returns an inline style for dimming an element and disabling pointer events on it, given a boolean value:

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

and using it on elements as such:

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

In the disabled div, there are Material-UI Buttons. However, it turns out that they don't care if pointerEvents are disabled on their parent div, and remain clickable, which is a big problem. So, on the Buttons I had to set disabled={loading}. Then, this dims the Buttons themselves, which unnecessarily compounds with the lowered opacity of disableOnTrue, meaning I would need to add some custom styling to ameliorate that; I want the entire div to be disabled, not for the Button to look especially disabled.

I've also tried using the Backdrop component from Material, but couldn't get it to dim anything but the entire viewport.

Before I implement any sort of hacky solution throughout my entire app, I figured I should ask here to see if there is a clean way to achieve this that I'm missing. I've looked for quite a while, but haven't found anything.

material-ui reactjs css html
1 Answers

I split the concept of "disabling" into two functions:

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

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

to be used on divs that should be dimmed and inputs that should be disabled, respectively.

user_68672160
Related