Применить стиль шрифта к легенде MUI X BarChart ⇐ CSS

[Anonymous]

Как применить простой стиль шрифта (изменить размер) к текстовому элементу React/Material-UI x-charts BarChart Legend? В документации говорится, что:

Поскольку библиотека использует SVG для рендеринга, вы можете настроить их так же, как и другие компоненты MUI, с переопределением CSS. Компоненты диаграммы принимают реквизиты sx. Отсюда вы можете выбрать любой подкомпонент с именем его класса.

Однако мне не удалось реализовать какой-либо собственный стиль?
Я попробовал создать, а затем использовать StyledBarChart со своим собственным стилем:

Код: Выделить всё

import { styled } from '@mui/material/styles';
import { BarChart } from "@mui/x-charts/BarChart";

const StyledBarChart = styled(BarChart)(({ theme }) => ({
theme,
"& .MuiChartsLegend-series text": {
fontSize: '0.8em',
},
}));

export default StyledBarChart;

а также попробовали использовать свойство sx в компоненте BarChart:

Код: Выделить всё

Однако во всех случаях текстовый элемент легенды получает стиль, который переопределяет все мои стили CSS? Мой окончательный HTML-код всегда выглядит так:

Код: Выделить всё

My Legend Text Item

Есть ли способ как-то настроить размер шрифта для этих легенд?


Подробнее здесь: https://stackoverflow.com/questions/778 ... art-legend