theme not applying

[left belfry]

      <MantineProvider
        emotionCache={rtlCache}
        theme={{ dir: "rtl", colorScheme }}
      >
        <ApplicationContainer>
          <ToastProvider>
            <Component {...pageProps} />
          </ToastProvider>
        </ApplicationContainer>
      </MantineProvider>

for my ssr'd page i had to do the implementation with rtl dir defined and emotionCache. Perhaps this is the issue but i'm unable to reference theme vars like such :

          <Navbar
            mb={sm}
            width={{ base: 250 }}
            height={"fit-content"}
            p="xs"
          >
            <Navbar.Section grow mt="xs">
              <MainLinks />
            </Navbar.Section>
            <Navbar.Section>
              <User />
            </Navbar.Section>
          </Navbar>

throws an error on the mb={sm}

saying sm is not defined

any ideas?

[rotund gyro]

mb={"sm"}

all examples on docs are strings

when doing {sm} it's trying to reference a variable, as it is not created it will be impossible

[left belfry]

ah

ty ill ty

try

[rotund gyro]

you can also access them on the theme object, like theme.spacing.md, if you have access to it

[left belfry]

It didn't work when I tried to do mb = {"sm"}

but accesing the theme object way worked

odd

[rotund gyro]

ah