Skip to content

Commit

Permalink
GitBook: [#2] No subject
Browse files Browse the repository at this point in the history
garronej authored and gitbook-bot committed Jul 10, 2022
1 parent e207e10 commit a7b803e
Showing 4 changed files with 20 additions and 115 deletions.
1 change: 0 additions & 1 deletion SUMMARY.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@
* [withStyles](page-1/withstyles.md)
* [\<GlobalStyles />](page-1/globalstyles.md)
* [keyframes](page-1/keyframes.md)
* [useMergedClasses](page-1/usemergedclasses.md)
* [💽 Cache](readme-1-1.md)
* [💫 Nested selectors (ex $ syntax)](nested-selectors.md)
* [⚡ SSR](ssr/README.md)
11 changes: 3 additions & 8 deletions page-1/README.md
Original file line number Diff line number Diff line change
@@ -6,12 +6,7 @@
import {
createMakeAndWithStyles, //<- Create an instance of makeStyles() and withStyles() for your theme.
keyframes, //<- The function as defined in @emotion/react and @emotion/css
GlobalStyles, //<- A component to define global styles.
TssCacheProvider, //<- Provider to specify the emotion cache tss should use.
useCssAndCx, //<- Access css and cx directly.
// (Usually you'll use useStyles returned by makeStyles or createMakeStyles for that purpose
// but if you have no theme in your project, it can come in handy.)
useMergedClasses //<- Merge the internal classes an the one provided as props into a single classes object.
GlobalStyles, //<- A component to define global styles.
} from "tss-react";
```

@@ -31,6 +26,6 @@ import {
[keyframes.md](keyframes.md)
{% endcontent-ref %}

{% content-ref url="usemergedclasses.md" %}
[usemergedclasses.md](usemergedclasses.md)
{% content-ref url="broken-reference" %}
[Broken link](broken-reference)
{% endcontent-ref %}
77 changes: 0 additions & 77 deletions page-1/usemergedclasses.md

This file was deleted.

46 changes: 17 additions & 29 deletions readme-1-1.md
Original file line number Diff line number Diff line change
@@ -4,43 +4,31 @@ description: How to integrate emotion cache with TSS

# 💽 Cache

By default, `tss-react` uses an emotion cache that you can access with
There is two ways to make tss-react use a specific emotion cache instead of the default one. &#x20;

```tsx
import { getTssDefaultEmotionCache } from "tss-react"
```

If you want `tss-react` to use a specific [emotion cache](https://emotion.sh/docs/@emotion/cache) you can provide it using

```typescript
import { TssCacheProvider } from "tss-react"
```
### Using the provider

If you are using `tss-react` with mui, be aware that mui and TSS can't share the same cache.

Also the caches used by mui should have be instantiated with `"prepend": true`.
tss-react pickups the contextual cache. &#x20;

```tsx
import createCache from "@emotion/cache";
import { TssCacheProvider } from "tss-react";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const muiCache = createCache({
"key": "my-custom-prefix-for-mui",
"prepend": true
});

const tssCache = createCache({
"key": "my-custom-prefix-for-tss"
const cache = createCache({
"key": "custom"
});

<CacheProvider value={muiCache}>
<TssCacheProvider value={tssCache}>
render(
<CacheProvider value={cache}>
{/* ... */}
</TssCacheProvider>
</CacheProvider>;
</CacheProvider>
);
```

### Specify the cache at inception

```typescript
import createCache from "@emotion/cache";
```

{% hint style="info" %}
Using custom emotion caches impact how you [setup SSR](ssr/).
{% endhint %}
### &#x20;

0 comments on commit a7b803e

Please sign in to comment.