Как использовать стили из реакции-эмоции с HighchartsReact? - PullRequest
Новая
       42

Как использовать стили из реакции-эмоции с HighchartsReact?

1 голос
/ 29 мая 2020

Я хочу обернуть HighchartsReact с помощью HighChartWrapper, используя стили из 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} />

Стили не работают. Я знаю, что стилизация может стилизовать любой компонент, если он принимает свойство className.

Так есть ли у кого-нибудь рабочий пример или обходной путь для этого?

1 Ответ

0 голосов
/ 29 мая 2020

Можно обернуть компонент диаграммы и передать className prop через 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.io/s/highcharts-react-demo-vosjm?file= /demo.jsx

Документы: https://github.com/highcharts/highcharts-react#options -детали

...