Next.js 11 setup with Material UI Version 5 | Part 2 - Styled-Components

Подписаться 7 тыс.

Просмотров 9 тыс.

50% 1

Some of our favorite libraries have gone through some major upgrade versions. In this video, I look at how to set up the new Next.js version 11 with Material UI version 5.
There are 2 new ways to set up Material UI version 5 and in this video, we will look at how to set it up using styled-components and the styled-components engine. Since emotion is pretty similar to styled-components we will not go too into detail on what it is. We will however be focusing on the differences between the 2 setups so that you may make a decision as to which you would prefer to use.
Styled-Components docs: styled-components.com/docs
Starter Project to follow along: github.com/leoroese/nextjs-ma...
Timestamps:
0:00 intro
1:10 styled components install
5:30 mui v5 setup

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 24

@mohsenlotfi3905 2 года назад

Thank you, that was great

@LogopedLTD 2 года назад

Hello, Leo) When i try styling for example Button from material "const Button = styled(MuiButton)". I have error "Prop `className` did not match." P.S. i have run your repo, branch with styled-component

@sinamashini6708 2 года назад

I did't get it , so after this configurations if I import styled from @mui/material/styles this styled will be overridden by styled-component?

@shreyaskaundinya4379 2 года назад

First comment ! Alsoooo this series is soo good

@blackbeans3112 4 месяца назад

How to import styled components in SSR components in next js it is possible?

@kbaker04 2 года назад

I am really confused, I thought MUI was used within Styled Components but this looks like two separate options without a crossover. When/how would you use Styled Components over the MUI library?

@sinamashini6708 2 года назад

I asked the Material team, and they said after this configurations styled function which we import from @mui/material/styles will be overridden by emotion or styled-component and by default they use emotion ,because it's better in performance I guess, however they didn't bring emotion in the Mui package but they created something called styled-engine and it is responsible for overriding the styling library you wish to use, and I think we have only have two option: emotion(by default) or styled-components

@CodeDunks 2 года назад

Thanks for reaching out to them and also clarifying for us Sina!

@LuisVazquez-ky7yb 10 месяцев назад

mui/styles is legacy now and maybe will be removed in future versions plus it's not compatible with react 18

@mertcancetinkaya7648 2 года назад

It doesnt work for me. I get webpack error when I want to write my own style html tags like span. const Wrapper = styled.span` color: fuchsia; padding: 6px 12px; border: 1px dashed fuchsia; border-radius: 4px; `;

@CodeDunks 2 года назад

Hey Mertcan, sorry that you aren't able to get it work. I can't seem to replicate on my instance but I was able to get a component working like so import styled from 'styled-components'; const Wrapper = styled.span` color: fuchsia; padding: 6px 12px; border: 1px dashed fuchsia; border-radius: 4px; `; const StyledWrapper = () => { return Sup; }; export default StyledWrapper;

@mertcancetinkaya7648 2 года назад

@@CodeDunks yes it works but is it supposed to be import mui library like import { styled } from '@mui/system';

@CodeDunks 2 года назад

@@mertcancetinkaya7648 Hmm interesting. My guess is @mui/material might be using @mui/system under the hood? I see we have @mui/system in the next.config.js. I didn't really look into @mui/system specifically nor had I really heard of it until this comment. But at the bottom of this page here mui.com/system/basics/ They import { styled } from @mui/material/styles I was able to get it to work like this import { styled } from '@mui/material/styles'; const Wrapper = styled('span')` color: fuchsia; padding: 6px 12px; border: 1px dashed fuchsia; border-radius: 4px; `;

@mertcancetinkaya7648 2 года назад

@@CodeDunks yes but mui is little bit confusing to be honest. In these case I have to import {styled} from "styled-components" when I use styled components but import { styled } from @mui/material/styles not important after these config