如何在 HighchartsReact 中使用 styled from react-emotion？

Question

我想用 HighChartWrapper 来包装 HighchartsReact，使用 styled from react-emotion。

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

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 prop。

那么，有没有人有一个可行的例子或变通的方法？

Answer 1

你可以包装你的图表组件，并通过 className 榰 containerProps比如说，。

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.ioshighcharts-react-demo-vosjm?file=demo.jsx。

文档。 https:/github.comhighchartshighcharts-react#options-details。