One of the things I've done is define some custom material styles, like this:
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
fab: {
zIndex:101,
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
},
}),
);
and also in this _document.tsx:
import React from 'react';
import { ServerStyleSheets } from '@material-ui/core/styles';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import IndexFab from '../src/components/common/fab';
import Loader from "../src/components/loader";
export default class MyDocument extends Document {
render() {
return (
<Html lang="fa" dir={"rtl"}>
<Head><title>a</title></Head>
<body>
<Main/>
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) =>
{
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
console.log( sheets.toString());
return {
...initialProps,
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
When I run the yarn build command (which runs next build within it), the css is rendered as styles text in the head section, for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fab {
z-index: 101;
position: 'fixed';
bottom: 16px;
right: 16px;
}
</style>
</head>
<body>
</body>
</html>
Now, my question is how do I configure webpack or nextjs to transform these styles into separate css files and then include them with appropriate link tags in the head section.
I'm still learning about webpack and nextjs ;).