включение темы в реагировать-минимальная круговая диаграмма не работает - PullRequest
Новая
       14

включение темы в реагировать-минимальная круговая диаграмма не работает

0 голосов
/ 15 апреля 2019

Я использую реагирующую минимальную круговую диаграмму для создания некоторых круговых диаграмм в моем https://github.com/toomuchdesign/react-minimal-pie-chart

Я использую Material-UI для пользовательского интерфейса и хочу использовать темы для добавления цветов в круговую диаграмму 

import PieChart from 'react-minimal-pie-chart';

<PieChart
        data={[{
          title: 'One',
          value: 82,
          color: '#007DCD'
        }]}
        totalValue={100}
        lineWidth={20}
        label
        labelStyle={{
          fontSize: '25px'
        }}
        labelPosition={0}
      />

Я пытался заменить это на 

import PieChart from 'react-minimal-pie-chart';
<PieChart
        data={[{
          title: 'One',
          value: 82,
          color: theme.palette.secondary.main
        }]}
        totalValue={100}
        lineWidth={20}
        label
        labelStyle={{
          fontSize: '25px'
        }}
        labelPosition={0}
      />

Но это не работает.Хотелось бы предложения о том, как заставить это работать

1 Ответ

0 голосов
/ 16 апреля 2019

Я считаю, что если вы настраиваете цвета, вам нужно создать переменную темы и обернуть свой компонент внутри MuiThemeProvider следующим образом: 

import PieChart from "react-minimal-pie-chart";
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] },
    secondary: { main: '#11cb5f' },
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <PieChart
        data={[
          {
            title: "One",
            value: 82,
            color: theme.palette.secondary.main
          }
        ]}
        totalValue={100}
        lineWidth={20}
        label
        labelStyle={{
          fontSize: "25px"
        }}
        labelPosition={0}
      />
    </MuiThemeProvider>
    );
  }
}

Мне удалось изменить цвет диаграммы с помощью theme.palette.primary.mainи theme.palette.secondary.main, код можно увидеть здесь .

...