Re[2]: Replace jQueryUI with React UI ?
От: Lazytech Ниоткуда  
Дата: 09.12.20 14:05
Оценка: 4 (1)
Кстати, в либе Material UI есть свои подводные камни. С парочкой из них я столкнулся на днях при первом же знакомстве с нею. Речь идет о компоненте Tooltip, который я по неопытности добавил в свой пробный проект на React.

Во-первых, в JSX-коде теги этого компонента окружают элемент или компонент, который требуется снабдить тултипом:
<Tooltip title="Delete">
  <IconButton aria-label="delete">
    <DeleteIcon />
  </IconButton>
</Tooltip>

В моем случае это было не слишком удобно. Я бы предпочел, чтобы теги элемента, для которого требуется тултип, были вокруг тегов тултипа.

Во-вторых, в Dev Tools посыпались предупреждения, что "findDOMNode is deprecated in StrictMode". Сначала я было решил, что где-то накосячил, но, как выяснилось, проблема известная и в текущей версии Material UI толком не решена:
reactjs – material-ui Drawer – findDOMNode is deprecated in StrictMode – Stack Overflow

В-третьих, Tooltip из Material UI изначально выглядел коряво, а текст в тултипе было трудно читать из-за недостаточного контраста. Я сделал кастомные стили, но результат всё равно оставлял желать лучшего. В частности, края тултипа получились какими-то расплывчатыми, а текст в нем — недостаточно четким. Допускаю, что не докрутил какие-то настройки, но все-таки.

В-четвертых, когда число снабженных тултипами элементов достигло нескольких сотен, отрисовка страницы при переключении на нее и уходе с нее стала заметно подтормаживать. Наверное, с этим можно было что-то сделать, но в итоге я решил, что оно того не стоит.

Все вышеперечисленные проблемы разом ушли, как только я заменил Tooltip из хваленого Material UI на ноунейм-тултип, сделанный кем-то на CSS без использования JavaScript:
https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom

Прорисовка страницы заметно ускорилась, да и сами безымянные тултипы изначально выглядели, на мой взгляд, несравненно лучше брендовых.

ЧЯНТД?
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.