#Access theme functions in theme

2 messages · Page 1 of 1 (latest)

sacred spear
#

Hello guys! Im trying to set up different font sizes for my headings on small screen sizes.

`export const formsTheme: MantineThemeOverride = {
headings: {
fontFamily: "T-Star",
fontSize: "2.5rem",

[theme.fn.smallerThan("md")]: { // well I cant do this
  fontSize: "1.5rem",
},

},
};`

The theme is consumed the normal way:
<MantineProvider withGlobalStyles withNormalizeCSS theme={formsTheme}>

Any ideas on how to achieve this? I want this to apply on a global scale, so updating every <Title> is out of the question.

sacred spear
#

Okay, so I figured this out. Styles can take a function:
export const formsTheme: MantineThemeOverride = { components: { Title: { styles: (theme) => ({ // big brain solution root: { "&:is(h1)": { [theme.fn.smallerThan("md")]: { fontSize: "calc("+ theme.headings.sizes.h1.fontSize + " * 0.9)" }, } } }) } }, }