In my previous post about styled components I wrote about the general features of Styled Components, how to set up and use them and why to use them...
For further actions, you may consider blocking this person and/or reporting abuse
Nice explanation!
I'll add, in the new version of
styled-components
it possible to handle error when React throwing an error when you use unsupported/uncommon attributes for elements. styled-components.com/docs/api#tra...Let's say:
To handle it you can use
$
symbolNice article! Styled components are very cool, indeed.
What do you think about defining your styled components inside the same file as your normal component? This way you could potentially have a single file component, something that Vuers seem to love.
I haven't thought much about this much, just asking for some opinion.
Yes, you can surely do that. But it’s always good to devide logic from styling in my opinion. And sometimes a component can have only styles (like a wrapper), so it is not necessary to create separate file for that. Like you can have Menu.js and Menu.styles.js which include MenuWrapper and MenuContainer
Can you help why it is resulting in 10 ;
var i = 4;
for(var i = 0 ; i<10;i++){ // using var i for block scoping
console.log(i)
}
console.log(i) // consoling global 'i' but instead of 4 result get to +1 for the for
loop conditional { 10 };
why is it so ?? Please clear my doubt.... 🤔
its because you re-defined var i in your loop again, so the loop uses var i = 0. If you want var i to start from 4, you should do the following:
for(var i = 4 ; i<10;i++)
OR
for(var i = i ; i<10;i++)
Bro I don't want to start my var from 4 I am saying that if-
var i = 4; // stored in globals
for(var i = 0; i<10; i++){
console.log(i); // the var is block scoped and and it's 0 it will iterate until i<10 which is just obvious but after the loop / The second console.log(i) ; refers to globals but it gives 10 ; instead of 4 or 9+4 = 13 ;; CONCERN is - why 10 [from where is became 10]
}
console.log(i); // 10 ??????????
var doesn't create a block scope for the loop, it just rewrites the value for the variable i. Since the value of i changes to 10 after the loop ends, that will be printed. If you want to create a block scope for the loop, use let.
Nice article. I love styled-components.
Thank you! me too :)
Thanks Olena!
Great article Olena, I used styled components for my blog so this was a nice reminder of what I can do with it!
Thank you Danny :)
Nice! Really cool seeing some styled components in action. I don't use them often enough 🤔
I wasn't either :) but than I decided to give a try and it impressed me how much you can actually do there
Well discussed.
it is possible to create a constant inside style file and use props in that constant?
I enjoy your blog and exploring the corner of styled component.
Thank you and keep these good articles coming.
Most welcome :) I’m working on the next article because there is more you can do with styled components
Thanks Olena , this was great
Thank you so much , this is the best react styled-components article on the web . really nice explanation