本文详解如何通过 sx 属性精准控制 MUI X Charts 中 X/Y 轴线条颜色、刻度文字颜色、字体及粗细，解决常见“样式不生效”问题，并提供可直接运行的代码示例与关键注意事项。
本文详解如何通过 `sx` 属性精准控制 mui x charts 中 x/y 轴线条颜色、刻度文字颜色、字体及粗细，解决常见“样式不生效”问题，并提供可直接运行的代码示例与关键注意事项。
MUI X Charts 基于 SVG 渲染，其轴（Axis）组件采用标准化的 CSS 类名体系，不能直接使用 .MuiXAxis-root line 等非官方类名——这是导致原始代码中 sx 样式失效的根本原因。官方明确推荐通过预定义的 CSS 类选择器进行样式注入，这些类名在 ChartsAxis 组件的 CSS API 文档 中完整公开。
要正确修改坐标轴样式，需聚焦以下两类核心选择器：
- 轴线（Axis line）：对应 .MuiChartsAxis-{position} .MuiChartsAxis-line（如 bottom 或 left）
- 刻度标签（Tick labels）：对应 .MuiChartsAxis-{position} .MuiChartsAxis-tickLabel（支持独立控制左右/上下轴），或统一控制所有标签用 .MuiChartsAxis-tickContainer .MuiChartsAxis-tickLabel
以下是经过验证的完整示例，将 X 轴（底部）与 Y 轴（左侧）线条设为蓝色，刻度数字分别设为深蓝与红色，并统一使用 Roboto 字体：
import * as React from "react";
import { LineChart } from "@mui/x-charts/LineChart";
import Stack from "@mui/material/Stack";
export default function StyledAxesChart() {
return (
<Stack sx={{ width: "100%", p: 2 }}>
<LineChart
sx={{
// ✅ 正确：底部 X 轴线（横轴）
"& .MuiChartsAxis-bottom .MuiChartsAxis-line": {
stroke: "#1976d2", // 深蓝色轴线
strokeWidth: 1.2,
},
// ✅ 正确：左侧 Y 轴线（纵轴）
"& .MuiChartsAxis-left .MuiChartsAxis-line": {
stroke: "#1976d2",
strokeWidth: 1.2,
},
// ✅ 正确：底部刻度数字（X 轴标签）
"& .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel": {
fill: "#0d47a1", // 深蓝文字
fontFamily: "Roboto, sans-serif",
fontSize: "0.875rem",
},
// ✅ 正确：左侧刻度数字（Y 轴标签）
"& .MuiChartsAxis-left .MuiChartsAxis-tickLabel": {
fill: "#d32f2f", // 红色文字
fontFamily: "Roboto, sans-serif",
fontSize: "0.875rem",
},
// ✅ 可选：统一所有刻度标签字体（覆盖上述 font-family）
"& .MuiChartsAxis-tickContainer .MuiChartsAxis-tickLabel": {
fontWeight: 500,
},
}}
margin={{ bottom: 30, left: 40, right: 15, top: 10 }}
height={300}
series={[
{ data: [15, 23, 18, 19, 13], label: "示例数据", color: "#4e79a7" }
]}
xAxis={[{ scaleType: "point", data: ["一月", "二月", "三月", "四月", "五月"] }]}
/>
</Stack>
);
}? 关键注意事项：
- 类名必须精确匹配：MuiChartsAxis-bottom（非 MuiXAxis-root）、MuiChartsAxis-line（非 line 元素直接选择）是官方唯一支持的选择器，DOM 检查时请以 MuiChartsAxis-* 开头的类为准；
- strokeWidth 单位为数值（非 px）：SVG 中 strokeWidth 是无单位数值，设置 0.4 即可，勿写 "0.4px"；
- 避免样式冲突：若启用 theme.palette.mode === 'dark'，确保自定义颜色在暗色模式下仍具足够对比度；可结合 useTheme() 动态计算颜色；
- 响应式适配：fontSize 建议使用 rem 或主题断点值（如 theme.typography.body2.fontSize），保障多端可读性；
- 调试技巧：在浏览器开发者工具中展开 <svg> → 查找 <g class="MuiChartsAxis-bottom">，即可直观定位目标元素及其实际类名。
通过上述方法，你不仅能实现轴线与数字的精准着色，更能建立可复用的图表主题化能力——这是构建企业级数据看板不可或缺的基础技能。
