From 8c24db04656456fb5a78fff6b9cd8da8e565ed18 Mon Sep 17 00:00:00 2001 From: garronej Date: Sun, 29 Aug 2021 21:29:30 +0200 Subject: [PATCH] Enable classes prop to work in mui v5 #20 #19 #18 #17 #15 --- README.md | 58 ++++++++++++-- src/test/muiV4ssr/pages/index.tsx | 105 +++++++++++++++++++++++-- src/test/muiV4ssr/shared/makeStyles.ts | 7 +- src/test/spa/src/App.tsx | 86 +++++++++++++++++--- src/test/spa/src/index.tsx | 5 +- src/test/spa/src/makeStyles.ts | 15 +++- src/test/ssr/pages/_document.tsx | 3 +- src/test/ssr/pages/index.tsx | 25 +++--- src/test/ssr/shared/makeStyles.ts | 12 ++- 9 files changed, 269 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 6a3e714..bd0aecc 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ function useTheme() { } // material-ui users can pass in useTheme imported like: import { useTheme } from "@material-ui/core/styles"; +// material-ui v5 users will also need to pass a custom emotion cache, read later. export const { makeStyles } = createMakeStyles({ useTheme }); ``` @@ -131,18 +132,40 @@ a Next.js setup to use as reference. ```tsx import { render } from "react-dom"; import { CacheProvider } from "@emotion/react"; -import { getCache } from "tss-react/cache"; +import createCache from "tss-react/@emotion/cache"; //Or "@emotion/cache" + +export const muiCache = createCache({ + "key": "mui", + "prepend": true, +}); render( - + , document.getElementById("root"), ); ``` -Feel free to use [any emotion cache you want](https://emotion.sh/docs/cache-provider). -You don't have to use the default one provided in `tss-react/cache`. +`makeStyles.ts` + +```typescript +import { useTheme } from "@material-ui/core/styles"; +import { createMakeStyles } from "tss-react"; +import createCache from "tss-react/@emotion/cache"; //Or "@emotion/cache" + +export const tssCache = createCache({ + "key": "tss", +}); + +export const { makeStyles } = createMakeStyles({ + useTheme, + "cache": tssCache, +}); +``` + +If you use SSR (server side rendering) you'll have to provide `muiCache` and `tssCache`, in this order +to the functions that enable SSR to work. [See doc](#server-side-rendering-ssr) WARNING: **Keep `@emotion/styled` as a dependency of your project**. Even if you never use it explicitly, it's a peer dependency of `@material-ui/core` v5. @@ -506,8 +529,11 @@ const { Document } = createDocument(); /* If you use custom cache you should provide it here: +Example for mui v5 users: +import { muiCache } from "..."; +import { tssCache } from "..."; -const { Document } = createDocument({ "caches": [ cache1, cache2, ... ] }); +const { Document } = createDocument({ "caches": [ muiCache, tssCache ] }); */ export default Document; @@ -524,8 +550,11 @@ const { getInitialProps } = createGetInitialProps(); /* If you use custom cache you should provide it here: +Example for mui v5 users: +import { muiCache } from "..."; +import { tssCache } from "..."; -const { getInitialProps } = createGetInitialProps({ "caches": [ cache1, cache2, ... ] }); +const { Document } = createDocument({ "caches": [ muiCache, tssCache ] }); */ export default class AppDocument extends Document { @@ -547,8 +576,11 @@ import { createPageHtmlToStyleTags } from "tss-react/nextJs"; const { pageHtmlToStyleTags } = createPageHtmlToStyleTags(); /* If you use custom cache you should provide it here: +Example for mui v5 users: +import { muiCache } from "..."; +import { tssCache } from "..."; -const { pageHtmlToStyleTags } = createPageHtmlToStyleTags({ "caches": [ cache1, cache2, ... ] }); +const { Document } = createDocument({ "caches": [ muiCache, tssCache ] }); */ export default class AppDocument extends Document { @@ -586,8 +618,18 @@ import { getCache } from "tss-react/cache"; import { createMakeStyles } from "tss-react"; const emotionServers = [ - getCache(), //If you use custom cache(s) provide it/them here instead of the default. + getCache(), //If you use custom cache(s) provide it/them here instead of the default, see example below. +].map(createEmotionServer); + +/* +import { muiCache } from "..."; +import { tssCache } from "..."; + +const emotionServers = [ + muiCache, + tssCache ].map(createEmotionServer); +*/ const element = ; diff --git a/src/test/muiV4ssr/pages/index.tsx b/src/test/muiV4ssr/pages/index.tsx index 1702805..5a1b9bd 100644 --- a/src/test/muiV4ssr/pages/index.tsx +++ b/src/test/muiV4ssr/pages/index.tsx @@ -1,11 +1,23 @@ import Head from "next/head"; import { GlobalStyles } from "tss-react"; import { makeStyles, useStyles } from "../shared/makeStyles"; -import Button from "@material-ui/core/Button" import { StylesProvider } from "@material-ui/core/styles"; +import { styled } from "@material-ui/core"; +import Button from "@material-ui/core/Button" +import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles"; +import { createTheme } from "@material-ui/core/styles"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import Breadcrumbs from "@material-ui/core/Breadcrumbs"; -export default function Home() { +const theme = createTheme({ + "palette": { + "primary": { + "main": "#32CD32" + } + } +}); +export default function Home() { return ( <> @@ -14,7 +26,10 @@ export default function Home() { - + + + + ); @@ -34,6 +49,7 @@ function Root() { const { App } = (() => { + const useStyles = makeStyles()((theme, _params, css) => { const child = { @@ -41,10 +57,14 @@ const { App } = (() => { "border": "1px solid black" }; + const breadcrumbs2_separator= { + "color": "red" + }; + return { "root": { "& > h1:nth-child(2)": { - "color": theme.limeGreen, + "color": theme.palette.primary.main, }, }, "ovStyled": { @@ -60,10 +80,41 @@ const { App } = (() => { "background": "red", } }, - child + child, + "breadcrumbs_className": { + "backgroundColor": "lightblue", + "& .MuiBreadcrumbs-separator": { + "color": "red" + }, + "&:hover .MuiBreadcrumbs-separator": { + "color": "blue" + } + }, + + "breadcrumbs2_root": { + "backgroundColor": "lightblue", + [`&:hover .${css(breadcrumbs2_separator)}`]: { + "color": "blue" + } + }, + breadcrumbs2_separator, + + "button2_className": { + "backgroundColor": "red" + }, + + "button2_root": { + "backgroundColor": "red" + } + }; }); + + const H1 = styled('h1')({ + "color": "yellow" + }); + function App(props: { className?: string; }) { const { className } = props; const { classes, css, cx } = useStyles(); @@ -92,10 +143,12 @@ const { App } = (() => { Black, should have border and shadow

Should be cyan

- +

Should be yellow

+

Should be dark red

+ + + + + ); diff --git a/src/test/muiV4ssr/shared/makeStyles.ts b/src/test/muiV4ssr/shared/makeStyles.ts index 1919b0f..e8e1a58 100644 --- a/src/test/muiV4ssr/shared/makeStyles.ts +++ b/src/test/muiV4ssr/shared/makeStyles.ts @@ -1,11 +1,6 @@ import { createMakeStyles } from "tss-react"; import { getCache } from "tss-react/cache"; - -export function useTheme() { - return { - "limeGreen": "#32CD32", - }; -} +import { useTheme } from "@material-ui/core/styles"; export const { makeStyles, useStyles } = createMakeStyles({ useTheme, diff --git a/src/test/spa/src/App.tsx b/src/test/spa/src/App.tsx index 9c5b1f5..1e9c3e3 100644 --- a/src/test/spa/src/App.tsx +++ b/src/test/spa/src/App.tsx @@ -3,12 +3,7 @@ import { makeStyles } from "makeStyles"; import { GlobalStyles } from "tss-react"; import { styled } from "@material-ui/core"; import Button from "@material-ui/core/Button" -import { css } from "tss-react/@emotion/css"; - -export type Props = { - className?: string; -}; - +import Breadcrumbs from "@material-ui/core/Breadcrumbs"; const useStyles = makeStyles()((theme, _params, css) => { @@ -17,6 +12,10 @@ const useStyles = makeStyles()((theme, _params, css) => { "border": "1px solid black" }; + const breadcrumbs2_separator = { + "color": "red" + }; + return { "root": { "& > h1:nth-child(2)": { @@ -36,17 +35,44 @@ const useStyles = makeStyles()((theme, _params, css) => { "background": "red", } }, - child + child, + "breadcrumbs_className": { + "backgroundColor": "lightblue", + "& .MuiBreadcrumbs-separator": { + "color": "red" + }, + "&:hover .MuiBreadcrumbs-separator": { + "color": "blue" + } + }, + + "breadcrumbs2_root": { + "backgroundColor": "lightblue", + [`&:hover .${css(breadcrumbs2_separator)}`]: { + "color": "blue" + } + }, + breadcrumbs2_separator, + + "button2_className": { + "backgroundColor": "red" + }, + + "button2_root": { + "backgroundColor": "red" + } + }; }); + const H1 = styled('h1')({ "color": "yellow" }); -export function App(props: Props) { +export function App(props: { className?: string; }) { const { className } = props; - const { classes, cx } = useStyles(); + const { classes, css, cx } = useStyles(); return ( <> @@ -74,7 +100,7 @@ export function App(props: Props) {

Should be cyan

Should be yellow

Should be dark red

- + + + + + ); -} +} \ No newline at end of file diff --git a/src/test/spa/src/index.tsx b/src/test/spa/src/index.tsx index 2696fd3..a758069 100644 --- a/src/test/spa/src/index.tsx +++ b/src/test/spa/src/index.tsx @@ -1,9 +1,8 @@ import { render } from "react-dom"; //NOTE: If makeStyles was located in src/app we would write: import { makeStyles } from "app/makeStyles"; -import { useStyles } from "makeStyles"; +import { useStyles, muiCache } from "makeStyles"; import { App } from "./App"; import { CacheProvider } from "@emotion/react"; -import { getCache } from "tss-react/cache"; import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles"; import { createTheme } from "@material-ui/core/styles"; import CssBaseline from "@material-ui/core/CssBaseline"; @@ -26,7 +25,7 @@ function Root() { } render( - + diff --git a/src/test/spa/src/makeStyles.ts b/src/test/spa/src/makeStyles.ts index 5cbc890..5b31ebd 100644 --- a/src/test/spa/src/makeStyles.ts +++ b/src/test/spa/src/makeStyles.ts @@ -1,5 +1,18 @@ import { createMakeStyles } from "tss-react"; import { useTheme } from "@material-ui/core/styles"; +import createCache from "tss-react/@emotion/cache"; //or "@emotion/cache" -export const { makeStyles, useStyles } = createMakeStyles({ useTheme }); +export const muiCache = createCache({ + "key": "mui", + "prepend": true +}); + +export const tssCache = createCache({ + "key": "tss-react", +}); + +export const { makeStyles, useStyles } = createMakeStyles({ + useTheme, + "cache": tssCache +}); diff --git a/src/test/ssr/pages/_document.tsx b/src/test/ssr/pages/_document.tsx index b8a2715..52c5c4b 100644 --- a/src/test/ssr/pages/_document.tsx +++ b/src/test/ssr/pages/_document.tsx @@ -1,5 +1,6 @@ import { createDocument } from "tss-react/nextJs"; +import { muiCache, tssCache } from "../shared/makeStyles"; -const { Document } = createDocument(); +const { Document } = createDocument({ "caches": [muiCache, tssCache] }); export default Document; diff --git a/src/test/ssr/pages/index.tsx b/src/test/ssr/pages/index.tsx index 385340f..a1cb4a1 100644 --- a/src/test/ssr/pages/index.tsx +++ b/src/test/ssr/pages/index.tsx @@ -1,9 +1,8 @@ import Head from "next/head"; import { GlobalStyles } from "tss-react"; -import { makeStyles, useStyles } from "../shared/makeStyles"; +import { makeStyles, useStyles, muiCache } from "../shared/makeStyles"; import { CacheProvider } from "@emotion/react"; import { styled } from "@material-ui/core"; -import { getCache } from "tss-react/cache"; import Button from "@material-ui/core/Button" import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles"; import { createTheme } from "@material-ui/core/styles"; @@ -26,12 +25,12 @@ export default function Home() { - + - , + ); } @@ -58,6 +57,10 @@ const { App } = (() => { "border": "1px solid black" }; + const breadcrumbs2_separator= { + "color": "red" + }; + return { "root": { "& > h1:nth-child(2)": { @@ -82,15 +85,19 @@ const { App } = (() => { "backgroundColor": "lightblue", "& .MuiBreadcrumbs-separator": { "color": "red" + }, + "&:hover .MuiBreadcrumbs-separator": { + "color": "blue" } }, "breadcrumbs2_root": { "backgroundColor": "lightblue", + [`&:hover .${css(breadcrumbs2_separator)}`]: { + "color": "blue" + } }, - "breadcrumbs2_separator": { - "color": "red" - }, + breadcrumbs2_separator, "button2_className": { "backgroundColor": "red" @@ -157,7 +164,7 @@ const { App } = (() => { color="primary" > background should be lightblue - and the separator (/) should be red + and the separator (/) should be red except when hover, then it is blue
{ color="primary" > background should be lightblue - and the separator (/) should be red + and the separator (/) should be red except when hover, then it is blue diff --git a/src/test/ssr/shared/makeStyles.ts b/src/test/ssr/shared/makeStyles.ts index 62a6f61..a6805f7 100644 --- a/src/test/ssr/shared/makeStyles.ts +++ b/src/test/ssr/shared/makeStyles.ts @@ -1,4 +1,14 @@ import { createMakeStyles } from "tss-react"; import { useTheme } from "@material-ui/core/styles"; +import createCache from "tss-react/@emotion/cache"; //or "@emotion/cache" -export const { makeStyles, useStyles } = createMakeStyles({ useTheme }); \ No newline at end of file +export const muiCache = createCache({ + "key": "mui", + "prepend": true +}); + +export const tssCache = createCache({ + "key": "tss-react" +}); + +export const { makeStyles, useStyles } = createMakeStyles({ useTheme, "cache": tssCache }); \ No newline at end of file