В моем приложении есть div s, для которых я хочу затемнить и отключить события мыши, в зависимости от состояния компонента - например, загрузки. Первоначальный метод, который я придумал, состоит в том, чтобы иметь вспомогательную функцию, которая возвращает встроенный стиль для затемнения элемента и отключения событий указателя на нем, учитывая логическое значение:
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, что излишне смешивается с пониженным значением opacity из disableOnTrue, что означает, что мне нужно будет добавить некоторый пользовательский стиль, чтобы улучшить это; Я хочу, чтобы весь div был отключен, а не Button выглядел особенно отключенным.
Я также пробовал использовать компонент Backdrop из материала, но не смог заставить его затемнить что угодно, кроме всего окна просмотра. отсутствует. Я долго искал, но ничего не нашел.