Unable to use css tokens, media queries or any stitches feature #675

krishna-sharma-dev · 2022-08-18T07:08:00Z

krishna-sharma-dev
Aug 18, 2022

Hello,
First things first, I love the NextUI and the way it is built. It seems like one of the top-contenders for other css-in-js frameworks and component library. Having gone through the documentation, i convinced my colleagues at the new company to migrate our recently built website to NextUI. They agreed for it and i am supposed to build a prototype for them by this week.

The Issue:
Even though i have followed the steps in the documentation, i am unable to get stitches token or media queries work in the css={{}} property.
Here is the code:

And here is how it shows up on the browser:

Here is how my _app.tsx and look like:

HEre is how my _document.tsx look like:

Neither the color props nor the media queries get applied.

I need help since i might be missing something. Please help in figuring this one out 😢

Answered by jrgarciadev

Aug 18, 2022

Hi 👋🏻 @krishna-sharma-dev , I'm glad you liked NextUI, could you please share the React/Next version you are using?

View full answer

jrgarciadev · 2022-08-18T21:05:30Z

jrgarciadev
Aug 18, 2022
Maintainer

Hi 👋🏻 @krishna-sharma-dev , I'm glad you liked NextUI, could you please share the React/Next version you are using?

5 replies

krishna-sharma-dev Aug 19, 2022
Author

Hi @jrgarciadev , Thanks for the quick reply.
Here are the package versions that i am currently using:
"@nextui-org/react@^1.0.0-beta.9"
next-12.2.3
react-dom@^18.2.0
react@^18.2.0

krishna-sharma-dev Aug 19, 2022
Author

Also, @jrgarciadev , i tried downgrading to

NextUI - 1.0.0-beta.8
React 17.0.2
react-dom 17.0.2
But this did not solve the issue. Still getting the same error as this: https://user-images.githubusercontent.com/110056286/185328285-091324ea-dfa2-4af3-98a0-566300f6dc4a.png

krishna-sharma-dev Aug 19, 2022
Author

So, i guess i figured out the issue @jrgarciadev .
I am using styled-components along with NextUI for my next.js project

I have this code in my next.config.js
const nextConfig = { compiler: { styledComponents: true, }, }
Enabling styled-components this way actually makes my css stitches useless. I tried the same with the create-next-app example in the NextUI's repo and could reproduce the same.

With styledComponents: true in the example app

With styledComponents removed from the next.config.js.compiler

Now my question is, how do i get both styled-components and css stitches working together?

krishna-sharma-dev Aug 19, 2022
Author

Finally, got it working. Instead of adding styledComponents:true in the next.config.js file, i edit my _document.tsx after following this guide like this:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });
      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

BTW, i still couldn't figure out why enabling styledComponents through next.config.js was causing this issue.

But nonetheless, i hope this helps others who might face similar issue.
@jrgarciadev

jrgarciadev Aug 28, 2022
Maintainer

Thanks a lot for sharing the solution @krishna-sharma-dev 🙌🏼

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to use css tokens, media queries or any stitches feature #675

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Unable to use css tokens, media queries or any stitches feature #675

krishna-sharma-dev Aug 18, 2022

Replies: 1 comment · 5 replies

jrgarciadev Aug 18, 2022 Maintainer

krishna-sharma-dev Aug 19, 2022 Author

krishna-sharma-dev Aug 19, 2022 Author

krishna-sharma-dev Aug 19, 2022 Author

krishna-sharma-dev Aug 19, 2022 Author

jrgarciadev Aug 28, 2022 Maintainer

krishna-sharma-dev
Aug 18, 2022

Replies: 1 comment 5 replies

jrgarciadev
Aug 18, 2022
Maintainer

krishna-sharma-dev Aug 19, 2022
Author

krishna-sharma-dev Aug 19, 2022
Author

krishna-sharma-dev Aug 19, 2022
Author

krishna-sharma-dev Aug 19, 2022
Author

jrgarciadev Aug 28, 2022
Maintainer