diff --git a/examples/with-styletron/app/layout.tsx b/examples/with-styletron/app/layout.tsx new file mode 100644 index 0000000000000..6fcf0a3f3c435 --- /dev/null +++ b/examples/with-styletron/app/layout.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { Provider as StyletronProvider } from "styletron-react"; +import { styletron } from "../styletron"; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/examples/with-styletron/pages/index.js b/examples/with-styletron/app/page.tsx similarity index 71% rename from examples/with-styletron/pages/index.js rename to examples/with-styletron/app/page.tsx index 52939a2d6598e..2dd7becf5ef63 100644 --- a/examples/with-styletron/pages/index.js +++ b/examples/with-styletron/app/page.tsx @@ -1,22 +1,25 @@ // DOCUMENTATION: http://styletron.org +"use client"; + import { styled, useStyletron } from "styletron-react"; -// statically styled component +// Statically styled component const Title = styled("h1", { color: "red", fontSize: "82px", }); -// dynamically styled component -const SubTitle = styled("h2", ({ $size }) => ({ +// Dynamically styled component +const SubTitle = styled("h2", ({ $size }: { $size: number }) => ({ color: "blue", fontSize: `${$size}px`, })); export default function Home() { - // an alternative hook based API + // An alternative hook-based API const [css] = useStyletron(); + return (
Title diff --git a/examples/with-styletron/package.json b/examples/with-styletron/package.json index 326bd2c37b411..08e90fbd20d1b 100644 --- a/examples/with-styletron/package.json +++ b/examples/with-styletron/package.json @@ -1,15 +1,20 @@ { "private": true, "scripts": { - "dev": "next", + "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "styletron-engine-atomic": "1.4.6", - "styletron-react": "6.1.0" + "react": "^18.3.1", + "react-dom": "^18.3.1", + "styletron-engine-atomic": "^1.6.2", + "styletron-react": "^6.1.1" + }, + "devDependencies": { + "@types/node": "^22.10.0", + "@types/react": "^18.3.12", + "typescript": "^5.7.2" } } diff --git a/examples/with-styletron/pages/_app.js b/examples/with-styletron/pages/_app.js deleted file mode 100644 index 7c701979cd640..0000000000000 --- a/examples/with-styletron/pages/_app.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Provider as StyletronProvider } from "styletron-react"; -import { styletron } from "../styletron"; - -export default function App({ Component, pageProps }) { - return ( - - - - ); -} diff --git a/examples/with-styletron/pages/_document.js b/examples/with-styletron/pages/_document.js deleted file mode 100644 index 20d20a8ab23a0..0000000000000 --- a/examples/with-styletron/pages/_document.js +++ /dev/null @@ -1,47 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from "next/document"; -import { Provider as StyletronProvider } from "styletron-react"; -import { styletron } from "../styletron"; - -class MyDocument extends Document { - static async getInitialProps(context) { - const renderPage = () => - context.renderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps({ - ...context, - renderPage, - }); - const stylesheets = styletron.getStylesheets() || []; - return { ...initialProps, stylesheets }; - } - - render() { - return ( - - - {this.props.stylesheets.map((sheet, i) => ( -