#TS error when defining theme in a different file

11 messages · Page 1 of 1 (latest)

main sand
#

Hi! I'm creating a NextJS project using Mantine. When I define the theme inside _app.tsx I get no TS errors, however if I remove the theme into it's own file I get TS errors.

Works OK, no TS error:

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme: `dark`,
      }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );
}

Has TS error:

_app.tsx:

import { MantineProvider } from "@mantine/core";
import type { AppProps } from "next/app";
import { theme } from "./theme";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
      <Component {...pageProps} />
    </MantineProvider>
  );
}

theme.ts: export const theme = { colorScheme: `dark`, };

I don't know if the TS error itself is important, because when I remove the line it complains about it starts complaining about something else.

coarse crane
#

I am doing this too, one sec I will post my working theme file

#

needed to give it the MantineThemeOverride type to get it to work

#

and this is my _app.tsx

# 
import type { AppProps } from "next/app";
import { MantineProvider, MantineThemeOverride } from "@mantine/core";
import React from "react";
import Layout from "../components/Layout";
import { lightTheme } from "../themes/lightTheme";
import { darkTheme } from "../themes/darkTheme";
import { useHotkeys, useLocalStorage } from "@mantine/hooks";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const [theme, setTheme] = useLocalStorage<MantineThemeOverride>({
    key: "mantine-color-scheme",
    defaultValue: lightTheme,
    getInitialValueInEffect: true,
  });
  const toggleTheme = (value?: MantineThemeOverride) =>
    setTheme(value || (theme === lightTheme ? darkTheme : lightTheme));

  //temporarily set to a hotkey until there is a UI element to change the theme (control + J)
  useHotkeys([["mod+J", () => toggleTheme()]]);
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
      <Layout theme={theme} toggleTheme={toggleTheme}>
        <Component {...pageProps} />
      </Layout>
    </MantineProvider>
  );
}

export default MyApp; ```
#

hope that helps

main sand
#

Thanks, it did! I just added the type to theme: const theme: MantineThemeOverride = {

coarse crane
#

Awesome!

#

I couldn't find a good example of this anywhere online either, maybe the devs should update the docs with this info.

gentle cedar