[docs] Replace makeStyles/withStyles with sx prop and styled

[oliviertassinari]

Following #6115, I think that we should migrate all our demos to use the Box component or styled-component. The goal is to hide @material-ui/styles as much as possible. styled-components keeps growing, a consolidation of this styling solution will be better, overall, for the React community.

Regarding the timing, I think that we can start to use the Box component now. For the demos that we can't migrate, we probably want to wait for the first proof of concept with #6115.

Attached is a list of component demos that should be migrated to the new style API.

Docs infra

• AdCarbon.js
• AdDisplay.js
• AdReadthedocs.js
• ComponentLinkHeader.js
• Demo.js
• DemoSandboxed.js
• DemoToolbar.js
• MarkdownElement.js
• ErrorDecoder.js
• Intentions.js
• Pro.js
• Quotes.js
• Sponsors.js
• Steps.js
• Users.js
• TopLayoutCompany.js
• TopLayoutBlog [docs] Cleanup remaining @mui/styles usages #32313
• Ad
• Team

Misc

• Files in /docs/src/pages/getting-started/templates/ [docs] Migrate templates to emotion #26604
• Files in /test/regressions/, e.g. TestViewer.js [test] Migrate regressions to emotion #27010
• Files in /docs/src/pages/premium-themes/ [docs] Migrate paperbase premium template to emotion #26658 [docs] Migrate onepirate premium template to emotion part1 #26671 [docs] Migrate onepirate premium template to emotion part2 #26707
• Onepirate/Snackbar [docs] Cleanup remaining @mui/styles usages #32313
• Onepirate/TextField [docs] Cleanup remaining @mui/styles usages #32313
• Onepirate/Typography [docs] Cleanup remaining @mui/styles usages #32313
• SearchIcons.js
• RtlOptOut.tsx

Layout

• Box
• Container [docs] Migrate Container demos to emotion #25220
• Grid [docs] Migrate Grid demos to emotion #25332
• Stack New component
• Hidden ? There is a problem that is intended to eliminate this.
• Image List [docs] Migrate ImageList demos to emotion #25301

Inputs

• Autocomplete [docs] Migrate Autocomplete demos  #26127
• Button [docs] Migrate Button demos to emotion #25138
• Buttom Group
• Checkbox [docs] Migrate Checkbox demos to emotion #25394
• Floating Action Button [docs] Migrate Fab demos to emotion #25251
• Radio Button [docs] Migrate Radio demos to emotion #25396
• Rating [docs] Migrate Rating demos to emotion #25252
• Select [docs] Migrate Select, Progress demos to emotion #26178
• Slider
• Switch [docs] Migrate Switch demos to emotion #25366
• Text Field [docs] Migrate TextField demos to emotion #25626
• Transfer List [docs] Migrate Transfer List demos to emotion #25253
• Toggle Button [docs] Migrate ToggleButton demos to emotion #25333

Navigation

• Button Navigation [docs] Migrate Bottom Navigation demos to emotion #25180
• Breadcrumbs [docs] Migrate Breadcrumbs demos to emotion #25302
• Drawer
• Link [docs] Migrate Links demos to emotion #25303
• Menu [docs] Migrate Menu demos to emotion #25554
• Pagination [docs] Migrate Pagination demos to emotion #25183
• Speed Dial [docs] Migrate SpeedDial to emotion #25367
• Stepper [docs] Migrate Tooltip, Steppers demos to emotion #26165
• Tabs [docs] Migrate Tabs, Table, Snackbar demos to emotion #26175

Surfaces

• Accordion
• App Bar [docs] Migrate AppBar demos to emotion #25335
• Card [docs] Migrate Card demos to emotion #25557
• Paper [docs] Migrate Paper demos to emotion #25213

Feedback

• Alert [docs] Migrate Alert demos to emotion #25074
• Backdrop
• Dialogs [docs] Migrate Dialog demos to emotion #26162
• Progress [docs] Migrate Select, Progress demos to emotion #26178
• Skeleton [docs] Migrate Skeleton demos to emotion #25212
• Snackbar [docs] Migrate Tabs, Table, Snackbar demos to emotion #26175

Data Display

• Avatar [docs] Migrate Avatar demos to emotion #25375
• Badge
• Chip [docs] Migrate Chip demos to emotion #25268
• Divider [docs] Migrate Divider demos to emotion #25145
• Icons [docs] Migrate Icons demos to emotion #25412
• Material Icons No need to migrate
• List [docs] Migrate List demos to emotion #25266
• Table [docs] Migrate Tabs, Table, Snackbar demos to emotion #26175, ReactVirtualizedTable.tsx [docs] Cleanup remaining @mui/styles usages #32313
• Tooltip [docs] Migrate Tooltip, Steppers demos to emotion #26165
• Typography [docs] Migrate Typography demos to emotion #25164

Utils

• Click Away Listener [docs] Migrate ClickAwayListener demos to emotion #25507
• CSS Baseline No need to migrate
• Modal
• No SSR [docs] Migrate NoSSR demos to emotion #25506
• Popover [docs] Migrate Popover demos to emotion #25620
• Popper: ScrollPlayground.js
• Portal [docs] Migrate Portal demos to emotion #25505
• Textarea Autosize No need to migrate
• Transitions [docs] Migrate Transitions demos to emotion #25488
• useMediaQuery No need to migrate

Lab

• Timeline [docs] Migrate Timeline demos to emotion #26036
• Date Time: CustomDateRangePickerDay.tsx
• Trap Focus No need to migrate
• Tree View [docs] Migrate TreeView demos #26146

[yordis]

@oliviertassinari what is the exactly the tasks in hand?

Here is what I understand,

1. Run the docs website
2. Find all the example source code that uses material-ui/styles
3. Replace them with styled-components

Is this correct?

[oliviertassinari]

@yordis I think that the timing is going to be key in this transition. I would imagine the following steps:

1. We replace the usage of @material-ui/styles in the demos with the Box component, where possible. Moving [Box][styled] Cache makeStyles() per JSON of props for style functions #16858 at the same time would help. This can be done in the near future.
2. We solve Use @material-ui/system in the core components  #15561, we migrate more demos away from @material-ui/styles to use the system props. The sooner we solve this, the better.
3. We update the customization demos to use styled-components, leveraging the global Mui class names. We might need to work on some helpers to make accessing the theme values easier.
4. We solve [RFC] Migrate to styled-components #6115, we migrate the last usages of @material-ui/styles to styled-components. This is a task for v5, I think that we can start it Q1 2020 in the v5 alpha/beta versions.

[ConAntonakos]

@oliviertassinari I'm curious, and I apologize if this was repeated: why not keep @material-ui/styles as a wrapper or an abstraction for styled-components?

[oliviertassinari]

@ConAntonakos it's an option. It could help if we need to extend/normalize some of the features of styled-components.

[yordis]

@oliviertassinari do we have a list of what's left?

[oliviertassinari]

@yordis We haven't done many efforts in this direction yet. However, there is a probability that it will require breaking changes, v5 is planned for around Q4 2020. I think that we should explore a partial deployment strategy for developers that want to leverage it sooner. Now, this effort has to be balanced with the other priorities, like the support of new advanced components (free and paid) or the release of an unstyled version of the library to increase our audience reach (with different themes, e.g. iOS style). The good news is that we will likely grow the team in the coming months, enabling us to move faster.

I imagine you are already using styled-components on top of Material-UI today as many other developers do (and not @material-ui/styles). What are the top pain points you hope to address with this migration?

From a product perspective, our incentive is about: smaller bundle size, better performance, steaming support, fewer bugs, CSS template strings support, larger community, enables to use the system props in the core components, allow true dynamic themes and props support, better docs.

[yordis]

However, there is a high probability that it will require breaking changes,

Yeah, I tried to change some examples, but they require some integration with the theme provider, so we may need to inject material/style theme provider and styled-component theme provider I am assuming.

v5 is planned for around Q4 2020.

That is far enough, would it be better to pin different issues for visibility on what is a priority at the moment?

I imagine you are already using styled-components on top of Material-UI today as many other developers do (and not @material-ui/styles).

Actually, I am quite happy with @material-ui/styles and I am not using styled-components when I use Material UI (I would remove withStyles since I don't want to rely on programmer discipline 😉 , but I understand legacy software may no have hooks still )🤷‍♂️

What are the top pain points you hope to address with this migration?

I am trying to help with the migration, personally, no pain points. Unless you take into consideration that as an ecosystem, I have to maintain two ways to develop something, but meh, personally, it is okay for me.

Maybe styled-components fixes some interoperability with NextJS and Gatsby since the last time I tried was hard to make Mui work with those tools because of the SSR and styles (I am not sure if still painful) and most libraries using styled-components work out of the box.

Let me know how I could help, like I said, I was using the pinned issues to find the prioritization of the Org