Javascript Nivo ResponsivePie没有响应

我试图复制，当您将鼠标悬停在饼片上时，该饼片将根据activeOuterRadiusOffset&activeInnerRadiusOffset值放大，但是在这种情况下，悬停在饼片上的饼片大小不会改变。我看到了一个问题，因为图表没有反应，人们使用AutoSizer，但复制结果给了我一个空白屏幕

编辑：我有一个，它似乎在codesandbox上正常工作，但在我的应用程序中不正常

import React, {  useRef, Component} from 'react';
import "./styles.css";
import {respPie} from "./data";
import Button from '@material-ui/core/Button';
import {Pie, ResponsivePie} from "@nivo/pie";
// Current issue with switch system
// https://github.com/plouc/nivo/issues/411
//https://www.gitmemory.com/issue/plouc/nivo/411/476589260
export default function App {
    return (
        <div style={{height: 500, width:'99%'}}>
        <ResponsivePie
        data={respPie}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.3}
        padAngle={2}
        cornerRadius={3}
        activeOuterRadiusOffset={88}
        activeInnerRadiusOffset={1}
        borderWidth={1}
        borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.2 ] ] }}
        arcLinkLabelsSkipAngle={5}
        arcLinkLabelsTextColor="#333333"
        arcLinkLabelsThickness={111}
        arcLinkLabelsColor={{ from: 'color', modifiers: [] }}
        arcLabelsSkipAngle={1}
        arcLabelsTextColor={{ from: 'color', modifiers: [ [ 'darker', 2 ] ] }}
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'ruby'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'c'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'go'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'python'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'scala'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'lisp'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'elixir'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'javascript'
                },
                id: 'lines'
            }
        ]}
        legends={[
            {
                anchor: 'bottom',
                direction: 'row',
                justify: false,
                translateX: 0,
                translateY: 56,
                itemsSpacing: 0,
                itemWidth: 100,
                itemHeight: 18,
                itemTextColor: '#999',
                itemDirection: 'left-to-right',
                itemOpacity: 1,
                symbolSize: 18,
                symbolShape: 'circle',
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemTextColor: '#000'
                        }
                    }
                ]
            }
        ]}
    />
                    </div>
    )
}

import React，{useRef，Component}来自'React'；
导入“/styles.css”；
从“/data”导入{respPie}；
从“@material ui/core/Button”导入按钮；
从“@nivo/Pie”导入{Pie，ResponsivePie}；
//开关系统的当前问题
// https://github.com/plouc/nivo/issues/411
//https://www.gitmemory.com/issue/plouc/nivo/411/476589260
导出默认功能应用程序{
返回(
)
}