#How do I make so my spacing supports also `xxs` and `xxl` sizes at global level?

3 messages · Page 1 of 1 (latest)

cyan glade
#

I see

export type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
export type MantineSpacing = keyof MantineSpacingValues | (string & {}) | number;

With MantineSize

export type MantineSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

I guess we can't extend MantineSizes to support these new sizes right?

What's the recommentdation for this?

dim plover
#

You should define your custom theme with these values, see:
https://mantine.dev/theming/theme-object/

import { createTheme, MantineProvider, rem } from '@mantine/core';

const theme = createTheme({ colors: { // Add your color deepBlue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],

so spacing would be your property to edit I guess

Theme object | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

cyan glade
#

But how do I define the size of xxl? or xxs?