Define new properties in theme object

[dallanlee]

As I've been overriding theme defaults I was hoping to add my own properties, i.e. fontFamilyDisplay. Why can't I add my own properties to have available from the theme? My purpose for doing this is that the design calls for two heading types and I'm creating a DisplayHeading component. For example:

import { Title, useMantineTheme } from '@mantine/core';

function DisplayHeading ({children, style, ...props}) {
  const theme = useMantineTheme()

  return (
    <Title style={{fontFamily: theme.fontFamilyDisplay, ...style}} {...props}>{children}</Title>
  );
}

export default DisplayHeading;

In my theme overrides object, I have:

const mantineThemeOverrides = {
  …
  fontFamilyDisplay:
    `"Custom Font", serif, ${EMOJI_FONT_FAMILIES}`,
  …
}

[rtivital]

We cannot do that because TypeScript does not allow dynamic properties usage with react context.

[dallanlee]

I see. But I am able to add nested properties to top-level properties like: theme.headings.fontFamilyDisplay… This is working but is this acceptable/good practice?

[rtivital]

We do not support this feature even in nested properties – it may or may not be working, and I cannot promise that it will be working in the future, so I would not use it.