all right so we're gonna get rid of the shitty buttons and for that I'm gonna use the lead [ __ ] that's it see you later because what I want to show out what I want to show you now its attributes because sometimes you might need to set an attribute for some reason so I'm gonna teach you how to do that all right here in my container I'm gonna create a small form that form inputs just inputs I just want to show you small small thing all right remember these all the elements that we create are goi
ng to be styled elements all right styled elements okay now I'm going to create the input here I just create them with the uppercase letter with E I uppercase it's easier for me and I do styled and this will be my input all right because sometimes you need this I'm gonna win because sometimes the styled components that's it for you but still so this isn't your input okay I'm gonna put the input here and we're good to go as the input right there papa all right you can do this sometimes placeholde
r hello and that works but sometimes you want to change the attributes of the input right sometimes you want to put your own custom attribute which is completely cool and I respect it so what you do is that you do these attributes here you open up of course and this will be an object of the attributes that you want to give to your button and I'm gonna say for example this one required true all right and of course I don't forget the style let me give this a border radius of 5 pixels and we're goo
d to go we have my attribute it is required if we come here and we right-click and we inspect you will see that it says input is equal input required this classes is a style component so you don't worry about them but look at it required awesome all right working now this part was born I know Amy I know what you mean this power was born what I want what I want to do now is show you how I do mix ins a mixing is basically a bunch of CSS it's like a many a group of CSS many good many CSS rules that
I want to encapsulate all right because I want to using in many places ok you have two options when you can do that maybe you can just use a different component like when I show you before that you take button and you extend it that's one option other option is you create what I call a mixing alright and for this we are going to import CSS CSS is going to allow us to encapsulate CSS rules all right I'm gonna copy paste is here and here I am going to create something called awesome card alright
an awesome card is just a CSS block alright and now thankfully I have it here because I don't want to do it again there we go and this is my mixing this means that this is all the thing that I want to use when I use a card alright maybe this is my design and this card is being used everywhere and let's say that I want to give this to my button maybe for my button so all I have to do is come here to my button gonna have to do this awesome card and I am good to go let's see there we go and I have
my yes like a shadow here let me just do board or not and as you can see has like a nice shadow that I made so let's say that you want to use this on a deep you can do the same thing for example container that's a deep you could do the same thing and you can use it so imagine that you make a combination of fonts or imagine that well yeah it's not pink let's make it here imagine that you make a combination of fonts imagine that you make yeah same [ __ ] imagine that you make a combination of head
ers and footers maybe you make a card like the one I'm making maybe you make many buttons maybe use something like that and you want to reuse it this is how you will do it you can put these kind of things inside of a shared file and then everybody will require it and they all have the same CSS no more copy pasting again I know it's [ __ ] great and you'll love me see you on the next video ciao
Comments
I love that accent and this course