Question

我正在使用react-minimal-pie-chart在我的https://github.com/toomuchdesign/react-minimal-pie-chart中创建一些饼图

我正在使用Material-UI for 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}
      />

但是它不起作用。想提出有关如何使其工作的建议

Answer 1

我相信，如果您要自定义颜色，则必须创建一个主题变量并将组件包装在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更改图表颜色，可以在here看到代码。

将主题合并到react-minimate-pie-chart中不起作用

1 个答案: