Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] jss-to-tss migration advise to drop clsx in favor of cx #30527

Merged
merged 7 commits into from
Jan 13, 2022
Merged

[docs] jss-to-tss migration advise to drop clsx in favor of cx #30527

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1520e52
[docs] jss-to-tss migration advise to drop clsx in favor of cx
garronej Jan 7, 2022
265c408
[docs] Add notice about possible eslint errors using useMergedClasses…
garronej Jan 8, 2022
5e7d16f
Update docs/src/pages/guides/migration-v4/migration-v4.md
mnajdova Jan 12, 2022
1d257bd
Update docs/src/pages/guides/migration-v4/migration-v4.md
mnajdova Jan 12, 2022
5a941b8
Merge branch 'master' into docs/jss-to-tss-migration-update
mnajdova Jan 12, 2022
5fa4034
yarn prettier & formatting
mnajdova Jan 12, 2022
8307fe7
Update docs/src/pages/guides/migration-v4/migration-v4.md
mnajdova Jan 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/src/pages/guides/migration-v4/migration-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2884,8 +2884,9 @@ and [an explicit name for the stylesheet](https://github.com/garronej/tss-react#
export default App;
```

> **Note**: To ensure that your class names always includes the actual name of your components,
> you can provide the `name` as an implicitly named key (`name: { App }`).
> **WARNING**: You should drop [`clsx`](https://www.npmjs.com/package/clsx) in favor of [`cx`](https://emotion.sh/docs/@emotion/css#cx).
> The key advantage of `cx` is that it detects emotion generated class names ensuring styles are overwritten in the correct order.
> **Note**: To ensure that your class names always includes the actual name of your components, you can provide the `name` as an implicitly named key (`name: { App }`).
> [See doc](https://github.com/garronej/tss-react#naming-the-stylesheets-useful-for-debugging).

#### `withStyles()`
Expand Down Expand Up @@ -2956,6 +2957,9 @@ function Parent() {
}
```

You may end up with eslint warnings [like this one](https://user-images.githubusercontent.com/6702424/148657837-eae48942-fb86-4516-abe4-5dc10f44f0be.png) if you deconstruct more that one item.
Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project, or [like this](https://github.com/InseeFrLab/onyxia-web/blob/a264ec6a6a7110cb1a17b2e22cc0605901db6793/package.json#L133) in a CRA.

**Note:** `tss-react` is **not maintained** by MUI.
If you have any question about how to setup SSR (Next.js) or if you are wondering
how to customize the `theme` object please refer to `tss-react`'s documentation,
Expand Down