Step 2.2: Setup Material-UI theme

[itays]

Hi there, thanks for this awesome tutorial, I think material-ui changed MuiThemeProvider to ThemeProvider

https://github.com/mui-org/material-ui/blob/master/examples/create-react-app-with-typescript/src/index.tsx

[Urigo]

thank you @itays ! Looks like it's not only a difference in name but it also means we need to move to the hooks based API introduced in v4 (which we've already updated the dependency to) - https://www.google.com/search?q=themeprovider+vs+muithemeprovider&oq=ThemeProvider+vs+&aqs=chrome.0.0j69i57.7217j0j7&sourceid=chrome&ie=UTF-8

It also means we need to add a direct dependency on @material-ui/styles. We also need to make sure it work together with styled-components.

Would you be able to submit a PR from latest master, demonstrating the changes for this migration and making sure it works on master? Here there is some more context worth looking into: https://material-ui.com/styles/basics/#styled-components-api

Then I will rebase the steps to use your changes.

[itays]

sure, I'll try when I'll have some free time. according to their docs (https://material-ui.com/styles/basics/#styled-components-api) you can use their styled api from @material-ui/styles which works like styled-components and emotion.

"Material-UI's styling solution is inspired by many other styling libraries such as styled-components and emotion." "You can expect the same advantages as styled-components."

so maybe you don't need to install styled-components

[mdazy]

Hi, I just started on the tutorial and I moved to Material UI's styled, it seems to work quite nicely, after some time figuring out the correct syntax for the theme-based version.

import React from "react";

import { Toolbar } from "@material-ui/core";
import { styled } from "@material-ui/core/styles";

const StyledChatsNavBar = styled(Toolbar)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: "white",
  fontSize: "20px",
  lineHeight: "40px"
}));

export default () => <StyledChatsNavBar>Whatsapp clone</StyledChatsNavBar>;

[Urigo]

this is interesting. I wonder of someone from styled-components and/or material-ui can share their thoughts about different reasons and use cases of when to use what to make this discussion even more interesting!

@oliviertassinari @mxstbr

[oliviertassinari]

The styled API is meant to reduce bundle size. We want to provide style adapters in v5 so you can use styled-components without compromises.