reactjs - 如何在 HighchartsReact 中使用来自 react-emotion 的样式？

Question

我想使用来自 react-emotion 的样式来使用 HighChartWrapper 包装 HighchartsReact。

下面是我正在尝试的伪代码。

import HighchartsReact from 'highcharts-react-official';
import styled from 'react-emotion';

const HighChartWrapper = styled(HighchartsReact)`
/* some styles here */
.highcharts-background {
    fill: white !important;
  }
`;

<HighChartWrapper highcharts={Highcharts} options={chartData} />

样式无效。我知道 styled 可以为任何组件设置样式，只要它接受 className 属性即可。

那么有人对此有工作示例或解决方法吗？

Answer 1

您可以包装您的图表组件并通过 containerProps 传递 className 属性，例如:

const Chart = (props) => {
  const [options] = useState({
    ...
  });

  return (
    <HighchartsReact 
      highcharts={Highcharts} 
      options={options} 
      containerProps={{ className: props.className }} 
    />;
  );
};

const HighChartWrapper = styled(Chart)`
/* some styles here */
  .highcharts-plot-border {
    fill: black !important;
  }
`;

---

现场演示: https://codesandbox.io/s/highcharts-react-demo-vosjm?file=/demo.jsx

文档: https://github.com/highcharts/highcharts-react#options-details