So all we have to do is try and think about this and do it yourself try and pause the video and do it. And if I go to our app it will still work because doesn't need to exist, if it doesn't exist it's simply going to render 105. So basically we want the same thing to be on width. If it does exist then let's return, if it doesn't exist let's return 105. So basically what's happening here is we're saying OK let's see if exists. So we can type this out by saying ? : 105. But then let's pass in a prop, let's have it accept a prop called size and then if it's set we'll just set it to that, otherwise we'll leave it at 105. If I'm to change this to something like 55 like what we want on results and I head to results, you'll see that we have the size we want. So I'm going to go back to localhost:3000, we already know it's working because it's the same exact component but basically yeah 105. Now I'm going to save this file and I'm going to exit out of that and we should have our styles still, so let's see what we want to do. Let's cut out that image and let's just cut out the entire. So what I want to do in my main.scss is get rid of this default 105 width and height. So if I save this, we're obviously going to get the same thing. Now we're also doing that with this constant, so just wanted to clear that up. Now the reason we are only doing one set of brackets is because this already contains the other set of brackets up here.īecause we just pass in a normal javascript object usually. So I just want to kind of elaborate how this is working so normally when we do in line styles we don't pass in a constant we just pass in two pairs of curly braces and when we say something like color and then like blue. So now in our image we can just say style is equal to in curly braces size. So first thing I want to do is in render say constant size is equal to an object and then I want to say height and we want it by default to be 105 and then we want the width to be by default 105. We can do this with some inline styles pretty easily, and this is a really good appropriate use of inline styles in react. So basically in here I want to make it so we can apply a custom size. I'm going to head over to the app here and close out my css and let's go and close out our Post and our recent posts and let's open up our logo.js. ![]() ![]() So let's go ahead and add in that functionality. We want to make it so on this results page it's a bit smaller in our design here if I hit inspect and I head over to the results page it's about 50 pixels, we'll make it 55 pixels just to make it a little bigger. The main bulk of this guide is to be modifying this logo component to take in a custom size so we can use it on multiple pages with different sizes. So we can get rid of this results H1 up here or whatever this is and then we're also going to modify it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |