Enable classes prop to work in mui v5 #20 #19 #18 #17 #15

garronej · Aug 29, 2021 · 89ddc75 · 89ddc75
1 parent 561e804
commit 89ddc75
Show file tree

Hide file tree

Showing 9 changed files with 291 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -33,28 +33,28 @@ $ yarn add tss-react @emotion/react
     <img src="https://user-images.githubusercontent.com/6702424/126204447-6f14ef75-63c2-4480-beb6-18d6fb94b50b.gif">
 </p>
 
--   [Quick start](#quick-start)
--   [API documentation](#api-documentation)
-    -   [Exposed APIs](#exposed-apis)
-    -   [`makeStyles()`](#makestyles)
-    -   [`useStyles()`](#usestyles)
-    -   [`<GlobalStyles />`](#globalstyles-)
-    -   [`keyframe`](#keyframe)
--   [Cache](#cache)
--   [Composition and nested selectors ( `$` syntax )](#composition-and-nested-selectors--syntax-)
-    -   [Selecting children by class name](#selecting-children-by-class-name)
-    -   [Internal composition](#internal-composition)
-    -   [Export rules](#export-rules)
--   [Server Side Rendering (SSR)](#server-side-rendering-ssr)
-    -   [With Next.js](#with-nextjs)
-        -   [If you don't have a `_document.tsx`](#if-you-dont-have-a-_documenttsx)
-        -   [**Or**, if you have have a `_document.tsx` but you haven't overloaded `getInitialProps`](#or-if-you-have-have-a-_documenttsx-but-you-havent-overloaded-getinitialprops)
-        -   [**Or**, if you have have a `_document.tsx` and an overloaded `getInitialProps`](#or-if-you-have-have-a-_documenttsx-and-an-overloaded-getinitialprops)
-    -   [With any other framework](#with-any-other-framework)
--   [Development](#development)
--   [FAQ](#faq)
-    -   [Why this instead of the hook API of Material UI v4?](#why-this-instead-of-the-hook-api-of-material-ui-v4)
-    -   [Why this instead of Styled component ?](#why-this-instead-of-styled-component-)
+- [Quick start](#quick-start)
+- [API documentation](#api-documentation)
+  - [Exposed APIs](#exposed-apis)
+  - [`makeStyles()`](#makestyles)
+  - [`useStyles()`](#usestyles)
+  - [`<GlobalStyles />`](#globalstyles-)
+  - [`keyframe`](#keyframe)
+- [Cache](#cache)
+- [Composition and nested selectors ( `$` syntax )](#composition-and-nested-selectors--syntax-)
+  - [Selecting children by class name](#selecting-children-by-class-name)
+  - [Internal composition](#internal-composition)
+  - [Export rules](#export-rules)
+- [Server Side Rendering (SSR)](#server-side-rendering-ssr)
+  - [With Next.js](#with-nextjs)
+    - [If you don't have a `_document.tsx`](#if-you-dont-have-a-_documenttsx)
+    - [**Or**, if you have have a `_document.tsx` but you haven't overloaded `getInitialProps`](#or-if-you-have-have-a-_documenttsx-but-you-havent-overloaded-getinitialprops)
+    - [**Or**, if you have have a `_document.tsx` and an overloaded `getInitialProps`](#or-if-you-have-have-a-_documenttsx-and-an-overloaded-getinitialprops)
+  - [With any other framework](#with-any-other-framework)
+- [Development](#development)
+- [FAQ](#faq)
+  - [Why this instead of the hook API of Material UI v4?](#why-this-instead-of-the-hook-api-of-material-ui-v4)
+  - [Why this instead of Styled component ?](#why-this-instead-of-styled-component-)
 
 # Quick start
 
@@ -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(
-    <CacheProvider value={getCache()}>
+    <CacheProvider value={muiCache}>
         <Root />
     </CacheProvider>,
     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 = <App />;
 

diff --git 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 (
         <>
             <Head>
@@ -14,7 +26,10 @@ export default function Home() {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <StylesProvider injectFirst>
-                <Root />
+                <MuiThemeProvider theme={theme}>
+                    <CssBaseline />
+                    <Root />
+                </MuiThemeProvider>
             </StylesProvider>
         </>
     );
@@ -34,17 +49,22 @@ function Root() {
 
 const { App } = (() => {
 
+
     const useStyles = makeStyles()((theme, _params, css) => {
 
         const child = {
             "background": "blue",
             "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
                     </h1>
                     <h1 className="foo">Should be cyan</h1>
-                    <Button variant="contained" color="secondary"> Background should be deep pink </Button>
+                    <H1>Should be yellow</H1>
+                    <H1 className={classes.ovStyled}>Should be dark red</H1>
+                    <Button variant="contained" color="primary"> Background should be lime green </Button>
                     <Button
                         variant="contained"
-                        color="secondary"
+                        color="primary"
                         className={classes.ovInternal}
                     >
                         Background should be dark blue
@@ -105,6 +158,44 @@ const { App } = (() => {
                             Background should turn red when mouse is hover the parent.
                         </div>
                     </div>
+
+                    <Breadcrumbs
+                        className={classes.breadcrumbs_className}
+                        color="primary"
+                    >
+                        <span>background should be lightblue</span>
+                        <span>and the separator (/) should be red except when hover, then it is blue</span>
+                    </Breadcrumbs>
+                    <div style={{ "height": 10 }} />
+                    <Breadcrumbs
+                        classes={{
+                            "root": classes.breadcrumbs2_root,
+                            "separator": classes.breadcrumbs2_separator
+                        }}
+                        color="primary"
+                    >
+                        <span>background should be lightblue</span>
+                        <span>and the separator (/) should be red except when hover, then it is blue</span>
+                    </Breadcrumbs>
+
+
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        className={classes.button2_className}
+                    >
+                        <span>The background should be red</span>
+                    </Button>
+
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        classes={{ "root": classes.button2_root, }}
+                    >
+                        <span>The background should be red</span>
+                    </Button>
+
+
                 </div>
             </>
         );

diff --git 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,