如何将简单字体样式(更改大小)应用到React/Material-UI x-charts BarChart图例文本元素？文档表明:
然而，我一直无法使任何定制造型工作？
我曾try 创建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;
并且还try 在BarChart组件上使用sx属性:
<BarChart
sx={{ "& .MuiChartsLegend-series text": { fontSize: "0.8em" } }}
dataset={...}
series={[...]}
xAxis={...}
/>
但是，在所有情况下，图例文本元素都会接收样式，该样式会覆盖我的所有CSS样式吗？我的最终HTML最终总是如下所示:
<text
x="11"
y="0"
text-anchor="start"
dominant-baseline="central"
style="font-family:
Montserrat, sans-serif;
font-weight: 400;
font-size:1rem;
line-height: 1;
color: inherit;
fill: rgba(0, 0, 0, 0.87);"
>
<tspan x="11" dy="0px" dominant-baseline="central">My Legend Text Item</tspan>
</text>
有没有办法为这些传说定制这个字体大小？