Accessing theme object in nextjs typescript

[jeepers3327]

Hi, I'm not sure if this is the correct place for this one, I'm wondering if how can I access the theme.orbit property inside a createGlobalStyle method.

I followed the working example in this repo but using typescript.

I had my _app.tsx like below

import { AppProps } from 'next/app';
import { ThemeProvider } from '@kiwicom/orbit-components';
import { defaultTokens, getTokens } from '@kiwicom/orbit-design-tokens';
import { createGlobalStyle } from 'styled-components';

import '@/styles/global.css';

const GlobalStyle = createGlobalStyle`
body {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  background-color: ${({ theme }) => theme.orbit.paletteCloudLight};
}
`;

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={{ orbit: defaultTokens }}>
      <>
       <GlobalStyle />
       <Component {...pageProps} />
      </>
    </ThemeProvider>
  );
}

but on this line background-color: ${({ theme }) => theme.orbit.paletteCloudLight}; , the editor said Property 'orbit' does not exist on type 'DefaultTheme'

Again, sorry if this is not the correct place for this type of query.
Please closed this one if its not allowed.

Thank you.

[CollierCZ]

Your code works for me when I bootstrap the example repo with create-react-app. Do you have a repo with a full reproduction?

[jeepers3327]

Thank you for confirming it on your end. I created a sandbox to reproduce the issue: here.

[CollierCZ]

In that sandbox, the background color seems to be applied and the only warning I see is about defaultTokens not being used. It uses a different method of invoking the tokens than you used in the original post here (using getTokens instead of defaultTokens for the theme -- you could also use getTokens from @kiwicom/orbit-components [instead of design-tokens, though it's really the same])

[jeepers3327]

It seems that the type warning regarding this line background-color: ${({ theme }) => theme.orbit.paletteCloudLight}; is minor, with that I'd like to close this issue.

My apologies for taking your time on this one.

[marcnewport]

Super late response, but if anyone else lands here - to access the theme object (eg. vs code intellisense) you can pass the theme as a type arg to createGlobalStyle.

// components/GlobalStyle.tsx

import { createGlobalStyle } from 'styled-components'
import { defaultTheme } from '@kiwicom/orbit-components'

const GlobalStyle = createGlobalStyle<{ theme: typeof defaultTheme }>`
  html,
  body {
    color: ${({ theme }) => theme.orbit.colorTextPrimary};
    font-family: ${({ theme }) => theme.orbit.fontFamily};
    padding: 0;
    margin: 0;
  }
`

export default GlobalStyle

You'll also want to declare the default theme for styled components to access it in your component files - see styled-components docs I'm using nextjs and do this in pages/_app.tsx

import type { AppProps } from 'next/app'
import 'styled-components'
import { defaultTheme, ThemeProvider } from '@kiwicom/orbit-components'
import GlobalStyle from '../components/GlobalStyle'

declare module 'styled-components' {
  export interface DefaultTheme {
    orbit: typeof defaultTheme.orbit
  }
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <ThemeProvider theme={defaultTheme}>
          <GlobalStyle />
          <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}