How to use styled from react-emotion with HighchartsReact?

Question

I want to wrap HighchartsReact with HighChartWrapper using styled from react-emotion.

Below is the pseudo-code that I am trying.

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} />

The styles are not working. I am aware that styled can style any component as long as it accepts a className prop.

So does anyone has a working example or a workaround for this?

Answer 1

You can wrap your chart component and pass className prop by containerProps, for example:

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;
  }
`;

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-vosjm?file=/demo.jsx

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