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

oliviertassinari · 2019-08-09T12:18:38Z

yordis · 2019-08-19T09:29:17Z

@oliviertassinari what is the exactly the tasks in hand?

Here is what I understand,

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

Is this correct?

oliviertassinari · 2019-08-22T09:24:44Z

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

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.
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.
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.
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 · 2019-09-24T01:20:17Z

@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 · 2019-09-24T09:12:43Z

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

yordis · 2019-10-20T13:10:33Z

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

oliviertassinari · 2019-10-20T13:47:02Z

@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 · 2019-10-20T14:07:33Z

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

oliviertassinari · 2019-10-20T14:23:23Z

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

It depends on the time horizon you are interested in. You can follow the issue with the label important, the roadmap page on the documentation and the monthly blog product updates.

I don't fully understand this point. Why not using styled-components when using Material-UI (today)? We had 1/3 of our users going down this path when we did our last survey, 6 months ago.

yordis · 2019-10-20T14:35:59Z

I don't fully understand this point. Why not using styled-components when using Material-UI (today)?

@material-ui/styles works like a champ so far, no reason to migrate everything 😄 so I am one of those out of 3 that don't use it together today.

Thank you for the info about prioritization.

oliviertassinari · 2019-10-20T14:58:16Z

@yordis btw, my answer was made under the assumption you were following up on the main styled-components issue. I haven't realized we were on the documentation one.

yordis · 2019-10-20T15:02:49Z

@oliviertassinari do you have any suggestions about the issue with theme context?

I tried to use props.theme inside an styled-components but didn't work, I am not sure if you have a suggestion for it, but I think we will require to add styled-components theme provider as well.

HiranmayaGundu · 2019-11-03T11:25:56Z

Hey @oliviertassinari! Are you looking for PR's that convert the existing customization demos to use styled-components as part of this issue?

nikandlv · 2020-01-27T13:50:20Z

I dont think styled-components is a good styling solution. current solution looks much much more readable, appealing, accessible and cleaner than styled. i dont see any good reason to migrate.

Jack-Works · 2020-02-11T07:17:24Z

I dont think styled-components is a good styling solution. current solution looks much much more readable, appealing, accessible and cleaner than styled. i dont see any good reason to migrate.

And get almost fully typed. Don't see any reason to migrate +1

oliviertassinari · 2021-05-30T23:23:51Z

@thclark, @cjnoname Is the dislike about the styled() API the CSS template string syntax (JavaScript object works too)? Or the love about makeStyles in its capability to have multiple class names (classes object)?

We have talked about bringing makeStyles back powered by emotion, to further ease the migration (we already keep @material-ui/styles around).

olros · 2021-06-01T10:19:42Z

Is the dislike about the styled() API the CSS template string syntax (JavaScript object works too)? Or the love about makeStyles in its capability to have multiple class names (classes object)?

To me, the best thing about makeStyles is the capability to have muliple class names declared side by side. That allows us to have all the styling used in a component/file declared in a single place and resuse a lot of the styling. In my opinion it does also make much more sense to apply separate styling from the jsx. I think the new demos with the new styled-syntax looks really chaotic and it's difficult to find the code you're looking for when there's styling everywhere.

As a reference, this is an example of makeStyles-usage in a lot my projects:

import classnames from 'classnames';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles((theme) => ({
  grid: {
    display: 'grid',
    gridGap: theme.spacing(2),
    gridTemplateColumns: '1fr 1fr',
    [theme.breakpoints.down('md')]: {
      gridTemplateColumns: '1fr',
      gridGap: theme.spacing(1),
    },
  },
  column: {
    gridTemplateColumns: '1fr',
  },
  margin: {
    margin: theme.spacing(1),
  },
}));

const Example = () => {
  const classes = useStyles();
  return (
    <div className={classnames(classes.grid, classes.margin)}>
      <div className={classnames(classes.grid, classes.column)}>{/* ... */}</div>
      <div className={classnames(classes.grid, classes.column)}>{/* ... */}</div>
    </div>
  );
};

kelly-tock · 2021-06-01T14:31:09Z

can totally ask in a separate thread, but realized that the default emotion api is the styled api. will it support using the css api as well?

cjnoname · 2021-06-01T14:37:53Z

@thclark, @cjnoname Is the dislike about the styled() API the CSS template string syntax (JavaScript object works too)? Or the love about makeStyles in its capability to have multiple class names (classes object)?

We have talked about bringing makeStyles back powered by emotion, to further ease the migration (we already keep @material-ui/styles around).

Thanks for asking.
Personally I hate to wrap many small components with styled'(<></>)', it looks stupid and a lot more work for people to read and write.
Centralize all css into makeStyles would make the CSS code look clean, easy to read and share.

I don't care what's behind "makeStyles". It doesn't matter if it's JSS or Emotion, but "makeStyles" is just a great syntactic sugar I'd like to use.

I am pretty sure that a lot of MUI users are moved from Style Component in order to be avoid of working with 'styles()' syntax.

PilotConway · 2021-06-01T14:48:11Z

We really like makeStyles on our team as well for two reasons. The first is the multiple classes in a single object and the second is being able to keep the styling separate from the layout. And we always know where styles are since they are defined at the top of our files (the order in our component files is always the same which is nice).

I agree as well, styled components are quick messy in a lot of cases. I'm not opposed to using them when I'm trying to wrap and re-export a single component, but when I'm just trying to apply a few additional styles to my JSX I vastly prefer the makeStyles hook syntax.

thclark · 2021-06-01T16:08:06Z

@thclark, @cjnoname Is the dislike about the styled() API the CSS template string syntax (JavaScript object works too)? Or the love about makeStyles in its capability to have multiple class names (classes object)?

We have talked about bringing makeStyles back powered by emotion, to further ease the migration (we already keep @material-ui/styles around).

@oliviertassinari my main dislike is the template string syntax. I know that styled() does work with javascript objects however the overwhelming majority of examples and tutorials out there don't use it. So we either accept dumping weird raw css strings everywhere (which are also then agony to template-in variables like logic from the theme) or you find yourself endlessly converting strings into JSS in order to copy-paste something into your code.

Perhaps, in that light, if the mui docs adopted a convention of using JSS in all the styled examples, that would be one way of easing the transition from makestyles.

kelly-tock · 2021-06-01T18:18:35Z

one thing I miss ATM is being able to run stylelint on the makeStyles code. i'm assuming using regular css syntax will allow us to do that with this new approach? it seems like emotion has stylelint support already?

nathanlambert · 2021-06-02T18:37:43Z

@kelly-tock I do this to get linting on standard CSS (also IIRC soon experimentalStyled will be renamed styled):

import { css } from "@emotion/react";
import { Box, experimentalStyled as styled } from "@material-ui/core";

const MyBox = styled(Box)(
  ({ theme }) => css`
    display: flex;
    margin-top: ${theme.spacing(2)};
    padding: ${theme.spacing(2)};
  `
);

oliviertassinari · 2021-06-02T22:51:22Z

I have created #26571 to have a place for the community to contribute to the pain generated by putting makeStyles on the side going forward with v5.

oliviertassinari added the docs Improvements or additions to the documentation label Aug 9, 2019

oliviertassinari pinned this issue Aug 9, 2019

oliviertassinari added this to the v5 milestone Aug 22, 2019

oliviertassinari mentioned this issue Sep 4, 2019

makeStyles API creates thousands of <style> tags synchronously #16756

Closed

2 tasks

oliviertassinari mentioned this issue Sep 11, 2019

Documentation of makeStyles #17387

Closed

netzwerg mentioned this issue Sep 17, 2019

Remove @material-ui/core dependency netzwerg/react-svg-timeline#14

Closed

lksilva mentioned this issue Oct 2, 2019

Replace ImgMediaCard demo to use styled-components #17663

Closed

oliviertassinari mentioned this issue Oct 8, 2019

[docs] Add classNames TS demo #17771

Merged

oliviertassinari added the priority: important This change can make a difference label Oct 20, 2019

oliviertassinari mentioned this issue Nov 5, 2019

[TextField] Add demo for color prop #18220

Merged

1 task

oliviertassinari removed the priority: important This change can make a difference label Dec 1, 2019

fyodor-e mentioned this issue Dec 20, 2019

[RFC] Migrate to styled-components #6115

Closed

oliviertassinari self-assigned this Feb 2, 2020

oliviertassinari added the priority: important This change can make a difference label Feb 2, 2020

oliviertassinari mentioned this issue Mar 6, 2020

[RFC] Material-UI v5 🚀 #20012

Closed

CodySchaaf mentioned this issue May 14, 2020

Using the Box component with the clone attribute has inconsistent styling in production vs dev #21038

Closed

2 tasks

vicasas mentioned this issue May 29, 2021

[docs] Migrate to emotion landing (part1) #26498

Closed

1 task

oliviertassinari mentioned this issue Jun 2, 2021

[RFC] Add makeStyles back? #26571

Closed

2 tasks

vicasas mentioned this issue Jun 28, 2021

[test] Migrate regressions to emotion #27010

Merged

1 task

oliviertassinari mentioned this issue Jul 7, 2021

[docs] Migrate Ad* components to emotion #27159

Merged

1 task

nelsonni mentioned this issue Jul 13, 2021

Upgrade Material UI v4 to v5 (@material-ui to @mui) EPICLab/synectic#469

Closed

1 task

oliviertassinari mentioned this issue Jul 20, 2021

[docs] Remove use of StyledEngineProvider at the top of the App #27358

Closed

mnajdova added priority: low and removed priority: important This change can make a difference labels Aug 16, 2021

oliviertassinari unpinned this issue Aug 17, 2021

mnajdova modified the milestones: v5, v5.1 Sep 8, 2021

oliviertassinari removed the priority: low label Nov 1, 2021

oliviertassinari added the priority: important This change can make a difference label Nov 10, 2021

oliviertassinari removed this from the v5.1 milestone Nov 10, 2021

mnajdova mentioned this issue Apr 15, 2022

[docs] Cleanup remaining @mui/styles usages #32313

Merged

mnajdova closed this as completed in #32313 Apr 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

oliviertassinari commented Aug 9, 2019 •

edited by mnajdova

Loading

yordis commented Aug 19, 2019

oliviertassinari commented Aug 22, 2019

ConAntonakos commented Sep 24, 2019 •

edited

Loading

oliviertassinari commented Sep 24, 2019

yordis commented Oct 20, 2019

oliviertassinari commented Oct 20, 2019 •

edited

Loading

yordis commented Oct 20, 2019 •

edited

Loading

oliviertassinari commented Oct 20, 2019 •

edited

Loading

yordis commented Oct 20, 2019 •

edited

Loading

oliviertassinari commented Oct 20, 2019

yordis commented Oct 20, 2019

HiranmayaGundu commented Nov 3, 2019

nikandlv commented Jan 27, 2020

Jack-Works commented Feb 11, 2020

oliviertassinari commented May 30, 2021 •

edited

Loading

olros commented Jun 1, 2021 •

edited

Loading

kelly-tock commented Jun 1, 2021

cjnoname commented Jun 1, 2021 •

edited

Loading

PilotConway commented Jun 1, 2021

thclark commented Jun 1, 2021

kelly-tock commented Jun 1, 2021

nathanlambert commented Jun 2, 2021 •

edited

Loading

oliviertassinari commented Jun 2, 2021

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

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

Comments

oliviertassinari commented Aug 9, 2019 • edited by mnajdova Loading

yordis commented Aug 19, 2019

oliviertassinari commented Aug 22, 2019

ConAntonakos commented Sep 24, 2019 • edited Loading

oliviertassinari commented Sep 24, 2019

yordis commented Oct 20, 2019

oliviertassinari commented Oct 20, 2019 • edited Loading

yordis commented Oct 20, 2019 • edited Loading

oliviertassinari commented Oct 20, 2019 • edited Loading

yordis commented Oct 20, 2019 • edited Loading

oliviertassinari commented Oct 20, 2019

yordis commented Oct 20, 2019

HiranmayaGundu commented Nov 3, 2019

nikandlv commented Jan 27, 2020

Jack-Works commented Feb 11, 2020

oliviertassinari commented May 30, 2021 • edited Loading

olros commented Jun 1, 2021 • edited Loading

kelly-tock commented Jun 1, 2021

cjnoname commented Jun 1, 2021 • edited Loading

PilotConway commented Jun 1, 2021

thclark commented Jun 1, 2021

kelly-tock commented Jun 1, 2021

nathanlambert commented Jun 2, 2021 • edited Loading

oliviertassinari commented Jun 2, 2021

oliviertassinari commented Aug 9, 2019 •

edited by mnajdova

Loading

ConAntonakos commented Sep 24, 2019 •

edited

Loading

oliviertassinari commented Oct 20, 2019 •

edited

Loading

yordis commented Oct 20, 2019 •

edited

Loading

oliviertassinari commented Oct 20, 2019 •

edited

Loading

yordis commented Oct 20, 2019 •

edited

Loading

oliviertassinari commented May 30, 2021 •

edited

Loading

olros commented Jun 1, 2021 •

edited

Loading

cjnoname commented Jun 1, 2021 •

edited

Loading

nathanlambert commented Jun 2, 2021 •

edited

Loading