Great video, thanks man! I have been using Tailwind with my latest React project. I'm not sure that it's actually that good. It works well, but having to put a lot of classes in makes the components look quite messy. I think it might be increasing my bundle size too.
I'd love to check out how we can implement dark mode with Styled components, I've done it with Material UI once, wanna checkout the alternatives tho, since I don't just want to use MUI for every little project I make.
Thanks for this awesome tutorial One question, styled components its normally used replacing completely css files or is It more like a complement? I mean would we have to write some traditional css still?
I am going to answer this question, just in case you are still figuring it out. So, in terms of styling your component, you can just ignore traditional css and apply styled-components instead. However though, there is nothing wrong to use CSS at the same time. For example, i practically designi this hero section using styled components, but when it comes to global styling, i use css to import color variables, h1 and such, along with the body margin.
question for friends, do you find styled components really useful? i mean it looks ok at first glance, but also doesn't look like huge improve to ordinary work with css.
All example are "Button"! So, how I able to using another CSS styling? I've need jQuery, Grid, Row, Col everything for design my web page. I have little knowledge of ReactJS but can't proceed when I using jQuery in my navigation menu display 'block'. Please, give me way for solving this issue.
@Classed what if i want in a Button component with 3 classes let's say we add danger i canot use ternary for that how would you do it ? Only with themes ?Thanks :)
There is a more elegant way ? I Would do like this : ${props => props.primary && css` background-color: red; color: #fff; border:none; `} ${props => props.secondary && css` background-color: orange; color: #fff; border:1px solid #000; `} ${props => props.disabled && css` background-color: blue; color: #fff; border:1px solid #000; `}
Look at the code below, i did it like this in one of my projects, You can store your unique styles in variables and then create a function with the control flow of your choice and then include that function in your component. import styled, { css } from 'styled-components'; const buttonStyles = css` base styles `; const propOneStyles = css` styles `; const propTwoStyles = css` styles `; const getButtonStyles = props => { if (props.propOne) { return propOneStyles; } return props.propTwo ? propTwoStyles : buttonStyles; }; export const ButtonContainer = styled.button` styles ${getButtonStyles} `;
Thanks for the video! Would love to see more Styled Components. what about the Grid ? i use bootstrap grid system, is there any solution in Styled Components?
If you're using create-react-app, just start up the server by typing "npm start" into your terminal. Now any changes to your files will automatically cause the server to restart to show the latest changes.
Never understood why people like this library. I mean, it's so easier to create a project and use SCSS which already has variables, mixins, imports. SCSS with components it's easier to maintain and reuse. Styled Components make the project so confusing and you constantly has to keep tracking of the "tag/components" names besides you have to download more plugins to handle the scss because styled components css definition is inside a string so your code editor gotta have something extra in order to syntax your "string/css" code.
I understand where you're coming from, but using SCSS requires you to come up with a more complex set of names and have to worry about using them in the correct scope, using styled components lets developers that are working on separate parts of the app not have to worry about the entire styles but just on the part that they're working on, they both have pros and cons and I wouldnt say one is better than the other, it's again the 'boring' answer of 'it depends on the project'
@@Classsed Well, actually not... Using React you have right from the gecko the "module.css" which means that you can create lots of classes in your CSS/SCSS file and not having to worry about naming because modules will create random names for you. So you can create a naming pattern for a single component and reuse the same name (if you want or by mistake) and when Webpack compile your product you can see that all the classes will be like "Navigation_nav_2Wpj". To me, styled component is just better than styling inside tags which is awful. But split the code between pages and different languages is so much better for me. I'm not saying that people shouldn't use Styled Components, i'm just saying that i still don't see this "huge advantage" of using this unless in very specifically cases and even then i still thing people should use CSS always separated from the JSX file.
Fair enough, CSS modules are cool and all but dont forget when you have standard components that you need in diffrent parts of your app (e.g. buttons, cards... etc) you can use CSS modules for those to keep the CSS scoped then every one of those will require 2 files instead of one, but to be frank, I myself dont use styled components almost at all, mostly utility libs like Tailwind and Karma or SCSS when I need it to be fully custom, but I know a bunch of devs that I respect who do so I guess it's matter of taste, at the end of the day there is million way to get the job done and everything has a tradeoff
@@Classsed Yeah, definitely there's no "right/wrong way" because it depends of the projects, workflows and people dealing with integrations. At the end of the day the best solution is what works for the people doing the job faster and easier as possible. If the dev doesn't know what he's doing, it will be a mess anyway rs
ahhh so there is an extension for vscode-styled-components!!!! I had a feeling it must be an extension problem! thanks a million!!!
Best styled-components tutorial I've come across, to date. Easy to understand and learn through examples. Great job.
A VERY NICE tutorial 👍🏻
You are able to wrap a lot of things about styled component in just 18 minuts 👌🏻
Great video, thanks man! I have been using Tailwind with my latest React project. I'm not sure that it's actually that good. It works well, but having to put a lot of classes in makes the components look quite messy. I think it might be increasing my bundle size too.
i guess it's pretty off topic but do anybody know a good place to stream newly released tv shows online?
In my current project i was confused a lot. But your single video made me super cool.. thanks a lot.
Introduction to Styled components - 0:00
With the Example - 2:08
Useful Extension - 4:37
Dynamic Controlling - 7:43
Global sharing Aka Theme -9:06
Thks for sharing am using them already they are so powerful
Helpful video! You convinced me to start using Styled Components! Also clear examples and explanation. Thank you!
My pleasure :D
the tutorial was really helpful.. i wish you do some contents on react-spring library
yup react-spring!
this was excellent, thank you!
You nailed it. Thanks!
I'd love to check out how we can implement dark mode with Styled components, I've done it with Material UI once, wanna checkout the alternatives tho, since I don't just want to use MUI for every little project I make.
Thank you for the explanation. Great video!
Very Helpful Video!
:D
14:02 The ultimate brain fart haha
I brain fart way too often
is the second props required there?.. can I make use of the first one ?
XD
Great Video! Would love to see more Styled Components!!!
Great tutorial, thank you so much for your sharing.
My pleasure!
Wow! Thanks for the video! 🙌🏻🙌🏻😄
thanks so much
You're welcome bro!
the rhyming was on point
What rhymes ? :D
Really awesome 👍
I have use generall css until now, I will use Styled Components from now :)
SC seams very easy using :)
Great Tutorial. Thanks for sharing.
Amazing !!!😍
Hello, Tell me that how can we use media queries in styled-components.
Thanks for the video bro, i need this video for resolve my project with react, thanks
what vscode theme you using ?
Thank u for this awesome video
Helpful video. Thanks!
Awesome tutorial, thank you
Thanks for this awesome tutorial
One question, styled components its normally used replacing completely css files or is It more like a complement? I mean would we have to write some traditional css still?
I am going to answer this question, just in case you are still figuring it out.
So, in terms of styling your component, you can just ignore traditional css and apply styled-components instead. However though, there is nothing wrong to use CSS at the same time. For example, i practically designi this hero section using styled components, but when it comes to global styling, i use css to import color variables, h1 and such, along with the body margin.
question for friends,
do you find styled components really useful?
i mean it looks ok at first glance,
but also doesn't look like huge improve to ordinary work with css.
Thank you, Great tutorial :)
Really helpful..!
really great
Teal is a thing! Makes me laugh
Hahaha :D
thank you excellent tutorial
My pleasure :)
thanks a lot for the video, i wish you would of covered the import of the actual fonts also. or did you have them installed locally already?
Thanks bro,very good tutorials
All example are "Button"! So, how I able to using another CSS styling? I've need jQuery, Grid, Row, Col everything for design my web page. I have little knowledge of ReactJS but can't proceed when I using jQuery in my navigation menu display 'block'. Please, give me way for solving this issue.
Thanks once again, great videos!
You're welcome :)
as I would with REACT + NEXT + STYLED-COMPONENT to put a css background image
how I use this css with next -> backound-image> url ('........')
Please what is the extension you are using to show the import size
Import Cost
@@Classsed Thank you so much, also a nice video really.
Thank You..✌✌
loved it!
Thanks :D
Thanks bro, that's quite a nice video. Also good english:) Cheers
Excellent tutorial!
why i cant use &:hover {} in my project will I have to download any library?
amazing video !! 👍👍👍
this video was helpful af :)
Thank you!
Thanks Man :D
@Classed what if i want in a Button component with 3 classes let's say we add danger i canot use ternary for that how would you do it ? Only with themes ?Thanks :)
There is a more elegant way ? I Would do like this :
${props => props.primary && css`
background-color: red;
color: #fff;
border:none;
`}
${props => props.secondary && css`
background-color: orange;
color: #fff;
border:1px solid #000;
`}
${props => props.disabled && css`
background-color: blue;
color: #fff;
border:1px solid #000;
`}
Look at the code below, i did it like this in one of my projects, You can store your unique styles in variables and then create a function with the control flow of your choice and then include that function in your component.
import styled, { css } from 'styled-components';
const buttonStyles = css`
base styles
`;
const propOneStyles = css`
styles
`;
const propTwoStyles = css`
styles
`;
const getButtonStyles = props => {
if (props.propOne) {
return propOneStyles;
}
return props.propTwo ? propTwoStyles : buttonStyles;
};
export const ButtonContainer = styled.button`
styles
${getButtonStyles}
`;
How to get that gzipped info alongside your library imports?
You should install import cost extension in vscode
You probably know by now because you asked ten months ago 😂😂
Thanks 🙏
what theme are you using?
Thanks for the video! Would love to see more Styled Components.
what about the Grid ?
i use bootstrap grid system, is there any solution in Styled Components?
i guess you can use built-in css grid
what is the extension name that is showing modules size when you import any module ?
Import cost by wix
Quick question: how do you get the rebuild done on save?
If you're using create-react-app, just start up the server by typing "npm start" into your terminal. Now any changes to your files will automatically cause the server to restart to show the latest changes.
tx u
love you
Awesome
great
great I like it
:D
how to style non tags
you mean?
Succint Great video
thanks :)
Where are you from? Just an interest because of your English spelling :)
С Англии он. И зовут его Ахмед
Never understood why people like this library. I mean, it's so easier to create a project and use SCSS which already has variables, mixins, imports. SCSS with components it's easier to maintain and reuse. Styled Components make the project so confusing and you constantly has to keep tracking of the "tag/components" names besides you have to download more plugins to handle the scss because styled components css definition is inside a string so your code editor gotta have something extra in order to syntax your "string/css" code.
I understand where you're coming from, but using SCSS requires you to come up with a more complex set of names and have to worry about using them in the correct scope, using styled components lets developers that are working on separate parts of the app not have to worry about the entire styles but just on the part that they're working on, they both have pros and cons and I wouldnt say one is better than the other, it's again the 'boring' answer of 'it depends on the project'
@@Classsed Well, actually not... Using React you have right from the gecko the "module.css" which means that you can create lots of classes in your CSS/SCSS file and not having to worry about naming because modules will create random names for you. So you can create a naming pattern for a single component and reuse the same name (if you want or by mistake) and when Webpack compile your product you can see that all the classes will be like "Navigation_nav_2Wpj".
To me, styled component is just better than styling inside tags which is awful. But split the code between pages and different languages is so much better for me.
I'm not saying that people shouldn't use Styled Components, i'm just saying that i still don't see this "huge advantage" of using this unless in very specifically cases and even then i still thing people should use CSS always separated from the JSX file.
Fair enough, CSS modules are cool and all but dont forget when you have standard components that you need in diffrent parts of your app (e.g. buttons, cards... etc) you can use CSS modules for those to keep the CSS scoped then every one of those will require 2 files instead of one, but to be frank, I myself dont use styled components almost at all, mostly utility libs like Tailwind and Karma or SCSS when I need it to be fully custom, but I know a bunch of devs that I respect who do so I guess it's matter of taste, at the end of the day there is million way to get the job done and everything has a tradeoff
@@Classsed Yeah, definitely there's no "right/wrong way" because it depends of the projects, workflows and people dealing with integrations. At the end of the day the best solution is what works for the people doing the job faster and easier as possible.
If the dev doesn't know what he's doing, it will be a mess anyway rs
Gay Intro... nice video though