NextJS values from config are not working. #76
-
|
Hi, so I just discovered Master CSS and I really like it. However, I just can't seem to make it work with NextJS properly. It works out of the box, but when I try to initialize the custom config, it just ignores it. Here's my code: src/pages/_document.ts import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { render } from '@master/css/render';
import { StyleSheet } from '@master/css';
export const MyDocument = () => {
return (
<Html>
<Head>
<script dangerouslySetInnerHTML={{ __html: 'window.MasterCSSManual=true' }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const { css } = render((await ctx.renderPage()).html, { StyleSheet });
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
<style id="master-css">{css}</style>
{initialProps.styles}
</>
),
};
};
export default MyDocument;src/styles/master.css.ts import { init, Style } from '@master/css';
Style.colorSchemes.push('hc');
Style.extend('classes', {
btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
card: 'p:20 b:1|solid|gray-80 bg:white',
});
init();src/pages/index.ts import type { NextPageWithLayout } from './_app';
const Home: NextPageWithLayout = () => {
return (
<div className="color:yellow-70@test color:red-60@hc color:beryl-60@light color:blue-60@dark btn">
Hello World!
</div>
);
};
export default Home;For example, in the index file, it just ignores the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
@dawidseipold Did you have import import '../styles/master.css' |
Beta Was this translation helpful? Give feedback.
-
|
Anytime! I think I'll write each step out in 2.0. 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
Add |
Beta Was this translation helpful? Give feedback.
-
|
I did that. It was something else on my end, but it's fixed now. Hence, why I removed that comment. Anyway, thank you for help! |
Beta Was this translation helpful? Give feedback.
-
|
The automatically generated CSS rules look like this: |
Beta Was this translation helpful? Give feedback.
-
|
@dawidseipold If you want to get my reply asap. Join our discord channel: https://discord.com/invite/sZNKpAAAw6 😄 |
Beta Was this translation helpful? Give feedback.
@dawidseipold Did you have import
src/styles/master.css.tsinto_pages/_app.tsx?