如何更改React Recharts库X轴/ Y轴刻度的字体系列？

Question

我的任务很简单：我要做的就是将字体系列更改Roboto, sans-serif为x轴和y轴“刻度”（即，两个轴上的值）。

我可以使用以下方法更改x轴刻度的字体大小： <XAxis tick={{ fontSize: 'sans-serif!important' }} />

但这不起作用： <XAxis tick={{ fontFamily: 'sans-serif' }} />

我可以看到的唯一其他选择是使用tickFormatter仅具有功能的文档中指定的属性，请参见此处：http : //recharts.org/#/en-US/api/XAxis

在这个项目中，我们使用Recompose实用程序库在React中使用编程的函数样式，因此我们以“纯”函数样式而不是普通的React类来呈现JSX。

我能想到的最好的猜测是：

const xAxisTickFormatter = name => {
  return <div style={{ fontFamily: 'sans-serif' }}>{name}</div>;
};

export const LineChart = ({ data, isMobile }) => {
  console.log(data);
  return (
    <C
      width={isMobile ? 400 : 650}
      height={400}
      data={data}
      margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
    >
      <XAxis
        tickFormatter={xAxisTickFormatter}
        dataKey="date"
        name="Date"
        style={{ fontFamily: 'sans-serif' }}
      />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }} />
      <Legend
        wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }}
        verticalAlign="bottom"
        height={36}
      />
      <Line
        type="linear"
        dataKey="price"
        name="Price"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line
        type="linear"
        dataKey="marketAverage"
        name="Market Average"
        stroke="#82ca9d"
      />
    </C>
  );
};

这沿x轴输出[object，Object]，请参见屏幕截图：

文档中唯一类似的官方示例在createClass此处使用旧语法：https : //jsfiddle.net/alidingling/9y9zrpjp/

任何帮助将不胜感激，因为我已经搜索了尽可能多的类似问题，并且到目前为止已花了大约半天的时间解决此问题。

Answer 1

为什么不只是设置字体系列以及您想通过CSS覆盖的其他内容？

我们有类似的东西：

.recharts-cartesian-axis-tick {    
    font-size: 1.4rem;
    font-family: Roboto, sans-serif;
}

Answer 2

该style属性对我来说很好用；至少在 recharts 2.0.0-beta.1 中。

<XAxis
    dataKey="date"
    style={{
        fontSize: '1rem',
        fontFamily: 'Times New Roman',
    }}
/>
<YAxis
    style={{
        fontSize: '0.8rem',
        fontFamily: 'Arial',
    }}
/>

你的tickFormatter函数应该只返回一个字符串，而不是一个 React 元素。