Подсказка Material-UI zIndex поверх MenuItem в компоненте Select
Моя проблема проста, у меня есть компонент <Tooltip>, окружающий компонент <Select>, и когда я нажимаю Select, всплывающая подсказка отображается над MenuItems следующим образом:
Нормальное поведение:
Не совсем нормальное поведение:
Поэтому я оставил все значения по умолчанию для Material-UI и Tooltip: zIndex: 1500, но для MenuItem их нет из того, что я видел. Я попытался установить zIndex для MenuItem равным 1501, но он по-прежнему ведет себя так же.
Мне было интересно, какой чистый способ оставить всплывающую подсказку за MenuItem, и если это невозможно, просто скрыть всплывающую подсказку при открытии Select MenuItems ...
Вот как выглядит мой код:
<Tooltip title = {'Filter by status'}>
<Select value = {this.state.status} onChange = {this.handleChangeEvent.bind(this, Filter.Status)}>
{statuses.sort(this.filterItemSortFn).map(item => {
return (<MenuItem style = {{zIndex: 1501}} value = {item}>{item}</MenuItem>);
})}
</Select>
</Tooltip>
Если я устанавливаю zIndex всплывающей подсказки на меньшее значение, и он прячется за menuItems, но я действительно не хочу играть со значениями по умолчанию, поскольку они также мешают другим значениям zIndex.
Я сделал CodeSandbox: https://codesandbox.io/s/rn68z4xlo
@ChaseDeAnda Потому что, даже если я это сделаю (я отредактировал вопрос, чтобы включить его, спасибо), он будет вести себя так же.
Есть ли на MenuItem комплект position? Попробуйте <MenuItem style = {{zIndex: 1501, position: relative}} />.
Ага, даже с style = {{zIndex: 1501, position: 'relative'}}
style = {{zIndex: 1501+' !important', position: 'relative'}}@Liam zIndex должен быть числом Type 'string' is not assignable to type 'number | "initial" | "inherit" | "unset" | "auto"'.. Даже если я заставлю z-index равным 1501 в моем браузере во время проверки элемента, всплывающая подсказка останется над MenuItems.
Не могли бы вы показать нам свой код в реальном времени в CodeSandBox?
Это потому, что у родительского меню z-index установлен на 1300. У дочернего элемента z-index не может быть больше, чем у его родителя. Вам нужно изменить .MuiModal-root-57, чтобы z-index был равен 1501.
Как я могу редактировать z-индекс MultiModal-root-X, если он всегда меняет имя и используется по умолчанию в Material-UI?
Это решит ваш вопрос (если он еще актуален): stackoverflow.com/questions/64317706/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это ошибка в Material-Ui Tooltip, и я думаю, она уже исправлена в новой версии.
Вы можете решить проблему, добавив zIndex во всплывающую подсказку.
<Tooltip title = {"Message"} style = {{ zIndex: '1' }}>
<Select
value = {this.state.name}
onChange = {this.handleChangeEvent}
input = {<Input id = "select-multiple" />}
MenuProps = {MenuProps}
>
{names.map(name => (
<MenuItem key = {name} value = {name}>
{name}
</MenuItem>
))}
</Select>
</Tooltip>
Или, если вы хотите полностью скрыть его, если открытое меню, используйте этот код
<Tooltip title = {"Message"}
onClick = {() => this.setState({ tooltip: !this.state.tooltip })}
style = {this.state.tooltip ? {display: 'none'}:{ zIndex: '1' }}>
<Select
value = {this.state.name}
onChange = {this.handleChangeEvent}
input = {<Input id = "select-multiple" />}
MenuProps = {MenuProps}
>
{names.map(name => (
<MenuItem key = {name} value = {name}>
{name}
</MenuItem>
))}
</Select>
</Tooltip>
Определенное состояние всплывающей подсказки
class MultipleSelect extends React.Component {
state = {
name: [],
tooltip: false,
};
https://codesandbox.io/s/0xrlmv96vl
У меня была аналогичная проблема с компонентом popper, мое исправление было <Popper style = {{zIndex: 1}}>...</Popper>
Во-первых, вы не можете назначить строку для zIndex, а во-вторых, это не переопределит ее начальный zindex.
Почему бы не установить
z-indexдля своего меню на что-то более высокое, напримерz-index: 1501в CSS?