Cannot override default theme?

[slhck]

Bugs and Questions

Checklist

• This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• I have read through the FAQ and Guides before asking a question

• I am using the latest version of Victory

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I want to provide my own theme, but I get the following error in TypeScript:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<VictoryChartProps>): VictoryChart', gave the following error.
    Type '{ area: { style: { data: { fill: string; }; labels: { fontFamily: string; fontSize: number; letterSpacing: string; padding: number; fill: string; stroke: string; }; }; } & { width: number; height: number; padding: number; colorScale: string[]; }; ... 14 more ...; voronoi: { ...; } & { ...; }; }' is not assignable to type 'VictoryThemeDefinition'.
      Types of property 'axis' are incompatible.
        Type '{ style: { axis: { fill: string; stroke: string; strokeWidth: number; strokeLinecap: string; strokeLinejoin: string; }; axisLabel: { textAnchor: string; } & { fontFamily: string; fontSize: number; letterSpacing: string; padding: number; fill: string; stroke: string; } & { ...; }; grid: { ...; }; ticks: { ...; }; tic...' is not assignable to type '({ style?: { axis?: CSSProperties | undefined; axisLabel?: CSSProperties | undefined; grid?: CSSProperties | undefined; ticks?: TickProps | undefined; tickLabels?: CSSProperties | undefined; } | undefined; } & ThemeBaseProps) | undefined'.
          Type '{ style: { axis: { fill: string; stroke: string; strokeWidth: number; strokeLinecap: string; strokeLinejoin: string; }; axisLabel: { textAnchor: string; } & { fontFamily: string; fontSize: number; letterSpacing: string; padding: number; fill: string; stroke: string; } & { ...; }; grid: { ...; }; ticks: { ...; }; tic...' is not assignable to type '{ style?: { axis?: CSSProperties | undefined; axisLabel?: CSSProperties | undefined; grid?: CSSProperties | undefined; ticks?: TickProps | undefined; tickLabels?: CSSProperties | undefined; } | undefined; } & ThemeBaseProps'.
            Type '{ style: { axis: { fill: string; stroke: string; strokeWidth: number; strokeLinecap: string; strokeLinejoin: string; }; axisLabel: { textAnchor: string; } & { fontFamily: string; fontSize: number; letterSpacing: string; padding: number; fill: string; stroke: string; } & { ...; }; grid: { ...; }; ticks: { ...; }; tic...' is not assignable to type '{ style?: { axis?: CSSProperties | undefined; axisLabel?: CSSProperties | undefined; grid?: CSSProperties | undefined; ticks?: TickProps | undefined; tickLabels?: CSSProperties | undefined; } | undefined; }'.
              The types of 'style.axis.strokeLinecap' are incompatible between these types.
                Type 'string' is not assignable to type '\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"unset\" | \"round\" | \"butt\" | \"square\" | undefined'.
  Overload 2 of 2, '(props: VictoryChartProps, context?: any): VictoryChart', gave the following error.
    Type '{ area: { style: { data: { fill: string; }; labels: { fontFamily: string; fontSize: number; letterSpacing: string; padding: number; fill: string; stroke: string; }; }; } & { width: number; height: number; padding: number; colorScale: string[]; }; ... 14 more ...; voronoi: { ...; } & { ...; }; }' is not assignable to type 'VictoryThemeDefinition'.

Reproduction

I have simply created a component with:

import victoryTheme from '/victoryTheme';
<VictoryChart theme={victoryTheme}></VictoryChart>

And the content of victoryTheme.ts is exactly the same content as https://github.com/FormidableLabs/victory/blob/v34.3.12/packages/victory-core/src/victory-theme/grayscale.js

I am using Victory 34.3.12.

[ianmh]

@slhck Did you figure a way around this? I'm having the same issue.

[slhck]

Sorry, I moved to another library since I couldn't figure this out.