How to use the @nivo/core.withTheme function in @nivo/core

cornerRadius: 0,

    // border
    borderWidth: 1,
    borderColor: 'white',

    childColor: 'inherit',

    // interactivity
    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withColors(),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))
            .outerRadius(d => Math.sqrt(d.y1))
            .cornerRadius(cornerRadius),

export default Component =>
    compose(
        defaultProps(SankeyDefaultProps),
        withState('currentNode', 'setCurrentNode', null),
        withState('currentLink', 'setCurrentLink', null),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['colors'], ({ colors }) => ({
            getColor: getOrdinalColorScale(colors, 'id'),
            getLinkColor: getOrdinalColorScale(colors, 'source.id'),
        })),
        withPropsOnChange(['nodeBorderColor', 'theme'], ({ nodeBorderColor, theme }) => ({
            getNodeBorderColor: getInheritedColorGenerator(nodeBorderColor, theme),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),
        })),
        withPropsOnChange(['sort'], ({ sort }) => {

const enhance = Component =>
    compose(
        defaultProps(PieDefaultProps),
        withTheme(),
        withDimensions(),
        withPropsOnChange(['radialLabel'], ({ radialLabel }) => ({
            getRadialLabel: getLabelGenerator(radialLabel),
        })),
        withPropsOnChange(['sliceLabel'], ({ sliceLabel }) => ({
            getSliceLabel: getLabelGenerator(sliceLabel),
        })),
        pure
    )(Component)

export default Component =>
    compose(
        defaultProps(SankeyDefaultProps),
        withState('currentNode', 'setCurrentNode', null),
        withState('currentLink', 'setCurrentLink', null),
        withColors(),
        withColors({
            colorByKey: 'linkColorBy',
            destKey: 'getLinkColor',
            defaultColorBy: 'source.id',
        }),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['nodeBorderColor'], ({ nodeBorderColor }) => ({
            getNodeBorderColor: getInheritedColorGenerator(nodeBorderColor),
        })),
        withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),
        })),
        pure
    )(Component)

value: 'value',

    cornerRadius: 0,

    colors: { scheme: 'nivo' },
    borderWidth: 1,
    borderColor: 'white',

    childColor: { from: 'color' },

    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withPropsOnChange(['colors'], ({ colors }) => ({
        getColor: getOrdinalColorScale(colors, 'id'),
    })),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))

export default Component =>
    compose(
        defaultProps(ChordDefaultProps),
        withState('currentArc', 'setCurrentArc', null),
        withState('currentRibbon', 'setCurrentRibbon', null),
        withMotion(),
        withTheme(),
        withDimensions(),
        withPropsOnChange(['label'], ({ label }) => ({
            getLabel: getLabelGenerator(label),
        })),
        withPropsOnChange(['padAngle'], ({ padAngle }) => ({
            chord: d3Chord().padAngle(padAngle),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['colors', 'keys'], ({ colors, keys }) => {
            const getColor = getOrdinalColorScale(colors, 'key')

            return {
                colorById: keys.reduce((acc, key) => {
                    acc[key] = getColor({ key })

export default Component =>
    compose(
        defaultProps(PieDefaultProps),
        withTheme(),
        withDimensions(),
        /*
        withPropsOnChange(
            ['enhancedData', 'defs', 'fill'],
            ({ enhancedData: _enhancedData, defs, fill }) => {
                const enhancedData = _enhancedData.map(datum => ({ ...datum }))
                const boundDefs = bindDefs(defs, enhancedData, fill)

                return {
                    enhancedData,
                    boundDefs,
                    legendData: enhancedData.map(datum => ({
                        label: datum.label,
                        fill: datum.fill || datum.color,
                    })),
                }

export default Component =>
    compose(
        defaultProps(ScatterPlotDefaultProps),
        withTheme(),
        withColors(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['symbolSize'], ({ symbolSize }) => ({
            getSymbolSize: getAccessorOrValue(symbolSize),
        })),
        withPropsOnChange(['data', 'width', 'height', 'scales'], computeScales),
        pure
    )(Component)

export default Component =>
    compose(
        defaultProps(StreamDefaultProps),
        withTheme(),
        withCurve(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['curveInterpolator'], ({ curveInterpolator }) => ({
            areaGenerator: area()
                .x(({ x }) => x)
                .y0(({ y1 }) => y1)
                .y1(({ y2 }) => y2)
                .curve(curveInterpolator),
        })),
        withPropsOnChange(['colors'], ({ colors }) => ({
            getColor: getColorRange(colors),
        })),
        withPropsOnChange(['borderColor'], ({ borderColor }) => ({
            getBorderColor: getInheritedColorGenerator(borderColor),
        })),

export default Component =>
    compose(
        defaultProps(BarDefaultProps),
        withTheme(),
        withDimensions(),
        withMotion(),
        withPropsOnChange(['colors', 'colorBy'], ({ colors, colorBy }) => ({
            getColor: getOrdinalColorScale(colors, colorBy),
        })),
        withPropsOnChange(['indexBy'], ({ indexBy }) => ({
            getIndex: getAccessorFor(indexBy),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
        })),
        withPropsOnChange(['labelLinkColor', 'theme'], ({ labelLinkColor, theme }) => ({
            getLabelLinkColor: getInheritedColorGenerator(labelLinkColor, theme),
        })),
        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
            getLabel: getLabelGenerator(label, labelFormat),