Стилизация всплывающей подсказки в графиках Mui
Кому-нибудь удавалось настроить стили всплывающей подсказки в диаграммах mui?
Кажется, что это должно быть относительно просто, но я искал везде и, хотя я нашел много информации о том, как форматировать сами данные, у меня возникли проблемы с поиском документации, объясняющей, как стилизовать CSS.
Я пробовал использовать имена классов , перечисленные здесь , и пробовал передавать стили через slotProps, но пока не нашел ничего, что сработало.
Ниже я привожу снимок экрана компонента, который я пытаюсь стилизовать.
Я попробовал опору sx, но мне не удалось выбрать правильный класс. Попытка изменить цвет шрифта, размер и радиус границы всплывающего окна.
Ответы 1
Вы можете установить стили всплывающих подсказок с помощью popper опоры slotProps следующим образом:
slotProps = {{
popper: {
sx: {
border: '4px solid yellow',
borderRadius: '20px',
backgroundColor: 'red',
'& .MuiChartsTooltip-root': {
backgroundColor: 'red',
'& .MuiTypography-root': {
color: 'blue',
},
},
},
},
}}
Вы можете взглянуть на этот StackBlitz, чтобы увидеть живой рабочий пример.
Вы уже пробовали использовать sx? mui.com/system/getting-started/the-sx-prop Каков желаемый результат от стиля (какие части вы пытаетесь адаптировать)?