`useTheme` returns undefined for theme values

[oe-josh-martin]

Steps to reproduce

When making use of useTheme in components, any values returned are undefined.

// Component.tsx

import { useTheme } from '@pigment-css/react';

const Component = () => { 
  ...
  const baseTheme = useTheme();
  console.log(baseTheme['tokens']); // undefined
  console.log(baseTheme['theme']); // undefined 
}

// next.config.js

withPigment({ ... }, {
  theme: {
    tokens: {
        ...
    },
  }
})

I have tried to replicate the test fixtures but I can't make use of ../zero-styled, and cannot drill into @pigment-css/react/theme as useTheme is not an exported member.

Search keywords: useTheme undefined

[brijeshb42]

Can you try this

import theme from '@pigment-css/react/theme';

What you are doing is in the process of being removed as it is Material UI specific requirement.

[oe-josh-martin]

Hey @brijeshb42

import theme from '@pigment-css/react/theme';

console.log(theme.tokens)

returns as below – it looks like it's just returning the type interface, rather than the actual values.

Property 'tokens' does not exist on type 'typeof import("./node_modules/.pnpm/@pigment-css+react@0.0.16_@types+react@18.2.33_react@18.2.0_typescript@5.4.5/node_modules/@pigment-css/react/theme/index")'.ts(2339)

[brijeshb42]

Could share a reproduction for me to dive into ? It'll be easier that way.

[oe-josh-martin]

Sure. Here's a full repo that has one component and then an app that consumes that component – https://github.com/oe-josh-martin/mui-pigmentcss-demo

I'm attempting to use useTheme here