Extending Mantine Default Size & Spacing Values

[KMathisGit]

I have been struggling extending mantine theme to support additional size and spacing tokens such as 2xl.

I realize that we can add additional values by adding them via createTheme and passing this to the MantineProvider for instance:

<MantineProvider theme={createTheme({ spacing: { '2xl': '3rem' } }) }> 
  <App />
</MantineProvider>

This does work however this does not extend the MantineSpacing type definition and leads to bad DX as intellisense and suggestions will only pick up the default MantineSpacing values 'xs' | 'sm' | 'md' | 'lg' | 'xl'

I could simply override the MantineTheme type definition with my own declaration but I would rather not do so for numerous reasons...

I feel like there should be some way to add additional tokens like I described above. Or am I overlooking some already existing behavior?

[JunlinPan-Crypto]

Same here.
Mantine only provide the declaration for theme.other and theme.colors overriding - https://mantine.dev/guides/typescript/#theme-object-declarations

[DavideBruner]

In case you're still facing this issue, here's what worked for me. I extended the Mantine theme to include the 'xxl' spacing token without overriding the core type definition.

First, in your global.d.ts:

import { MantineTheme } from "@mantine/core";

declare module "@mantine/core" {
  export interface MantineThemeOverride extends MantineTheme {
    spacing: Record<"xs" | "sm" | "md" | "lg" | "xl" | "xxl", string>;
  }
}

Then, in your theme overrides:

spacing: {
    xxl: "4rem",
},
...

[enyelsequeira]

In case you're still facing this issue, here's what worked for me. I extended the Mantine theme to include the 'xxl' spacing token without overriding the core type definition.

First, in your global.d.ts:

import { MantineTheme } from "@mantine/core";

declare module "@mantine/core" {
  export interface MantineThemeOverride extends MantineTheme {
    spacing: Record<"xs" | "sm" | "md" | "lg" | "xl" | "xxl", string>;
  }
}

Then, in your theme overrides:

spacing: {
    xxl: "4rem",
},
...

Hey @DavideBruner I am wondering if this actually worked for you, I've tried doing what you did and does not work for me wondering if you had a demo where that worked? also wondering if by doing that were you able to get autocomplete on the props as well?

[jrozbicki]

This doesn't work as MantineThemeOverride is a type, not `interface

[jrozbicki]

I'd love a way to improve DX and extend e.g. spacing autocomplete with 2xl.

It does work in runtime when you add it in createTheme({}) and later use in <Stack gap="2xl">.

Would be awesome to leverage module augmentation similarly to how we can do with MantineThemeColorsOverride for colors.

[rtivital]

It is hard to implement unfortunately

[wsfuller]

In similar situation where I need a smaller spacing attribute xxs. Yes the theme can be expanded but there's no auto complete so it's introducing institutional knowledge, not ideal.

I was trying to do the following with several variations but was never able to get this working

mantine.d.ts

import '@mantine/core';

declare module '@mantine/core' {
  export interface MantineThemeSpacing {
    xxs: number;
  }

  export interface MantineTheme {
    spacing: MantineThemeSpacing;
  }
}

tsconfig.json

{
  "compilerOptions": {...},
  "include": [
    ...,
    mantine.d.ts
  ],
  ...
}

theme.ts

const theme = createTheme({
  ...,
  other: {
    tokens: { ... },
  },
  components: {...},
  spacing: {
    xxs: ...
  }
});