My own color not working

[techinp]

I have followed every step on Document to add new color But it doesn't work.

Here is my code:

pages/_app.js

import { createTheme, NextUIProvider } from '@nextui-org/react';

const theme = createTheme({
  type: 'light',
  theme: {
    colors: {
      myColor: '#ff4ecd',
      // ...  more colors
    },
    space: {},
    fonts: {},
  },
});

function App({ Component, pageProps }) {
  return (
    <NextUIProvider theme={theme}>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default App

component/header.js

import { Text } from '@nextui-org/react';
export default function Header({}) {
  return (
    <>
      <Text css={{ color: '$myColor'}}>Foo</Text>
    </>
  )
}

Here is result from inspect styles

[tianenpang]

Hi @techinp I can' t reproduce it (codesandbox example), but it looks like a mistake in css variable generation.

Have you tried restart the dev server?

[techinp]

Thank you for your example and suggestion.

I think I have to find out what is something wrong in my project.

[techinp]

I found the thing that make my project can't use custom theme

if your project use styled-component and set ssr: true in .babelrc file the new css in custom theme will not working

here is my code
.babelrc

{
  "presets": ["next/babel"]
  "plugins": [["styled-components", { "ssr": true }]] // this line
}

[tianenpang]

Since Next.js 12, the swc compiler supports styled-component, you can use this feature instead of babel and works well with NextUI.

codesandbox example (updated)

Configure in next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // others...
  compiler: {
    styledComponents: true
  }
}

module.exports = nextConfig

nextjs support docs
styled-components docs
nextjs with styled-components examples