React使用Recharts时如何移除图表刻度旁的浅灰色线条

问题描述 #

在React项目中使用Recharts图表库时，需要移除深灰色主坐标轴线旁的浅灰色短刻度线，效果参考：

查阅官方文档未找到对应配置后，尝试通过自定义CSS隐藏目标元素，先后编写了如下样式：

.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}

.recharts-cartesian-axis-tick-line{
    display:hidden !important;
}

以上样式均未生效，已确认CSS文件引入正常，其他样式规则可正常生效。目标元素DOM结构参考：

解决方案 #

优先使用组件原生配置（推荐，无样式兼容问题） #

翻文档时容易漏掉最直接的配置项：Recharts的<XAxis>、<YAxis>组件提供了tickLine属性专门控制这类刻度短线，不需要写CSS覆盖。
直接给需要调整的轴加上tickLine={false}即可，只会隐藏浅灰色短刻度线，不会影响需要保留的深灰色主轴线（主轴线由axisLine属性控制，不要设错）。
示例代码：

// 以折线图为例
<LineChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  {/* X轴隐藏刻度短线 */}
  <XAxis dataKey="name" tickLine={false} />
  {/* 如果Y轴也有同类短线需要隐藏，加相同属性即可 */}
  <YAxis tickLine={false} />
  <Line type="monotone" dataKey="pv" stroke="#8884d8" />
</LineChart>

如果不想完全隐藏，只是要调整短线的样式、长度，也可以给tickLine传配置对象，比如tickLine={{ stroke: 'transparent', length: 0 }}也能达到视觉上隐藏的效果。

CSS覆盖方案（不推荐，版本升级可能因类名变化失效） #

之前写的CSS不生效核心原因是CSS属性值写错了：display属性没有hidden这个合法值，hidden是HTML元素的布尔属性，CSS中要让元素不渲染、不占坑用display: none，要让元素透明隐藏、保留占位用visibility: hidden。
修正后的样式如下：

.recharts-cartesian-axis-tick line {
  display: none !important;
}

如果是SVG线元素，也可以直接把描边设为透明实现隐藏：

.recharts-cartesian-axis-tick-line {
  stroke: transparent !important;
}

内容的提问来源于stack exchange，提问作者lulav