React TypeScript Tutorial - 7 - Style Props

welcome back everyone in this video let's see how to type styles as props to help with this scenario i've created another file called container.tsx within the file we have a container component and for the jsx we have a div tag with the style attribute containing some border and padding and also text in between the tags what we want now is for the style to be passed in as props rather than hard code within the component by now i'm sure you know the drill so let's dive into the code straight away at the top we add the container props type here let's add a prop called styles but what exactly is the type of styles the key is mainly a string but the value can be a number or a string and if we mention the key can be a string it could be any string how do we restrict to only valid css properties it could become quite complex which is why the react team decided to include the type in the react library itself and the type is react dot css properties again make sure to import react at the top if you're using react version less than 17. right now that we have container props within parentheses we can specify props of type container props style is also going to be equal to props dot styles back in app component we can import the component and invert it we can now specify the styles prop passing in the same styles as before border one pixel solid black and padding one ram you can see that we don't have any error if you try to add a property that is not a valid css property let's say padding asd typescript throws an error also if you try to assign a value that is not the right type for example display zero typescript again throws an error if you ask me i've made mistakes typing incorrect spellings for css properties and wondering why my css is not working as expected i'm sure you might have a similar situation as well so trust me when i say this being able to type css styles is a huge benefit and the type you have to keep in mind is react.css properties all right with that we have covered most of the basic props you're going to encounter in your day-to-day work hopefully you now have an idea of how to type them in the next video let me suggest a few tips when working with types and props thank you all for watching make sure to subscribe to the channel and i'll see you in the next one

Channel: Codevolution

Views: 1,860

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, Style Props with React and TypeScript

Id: FNfHtujZE4k

Length: 3min 39sec (219 seconds)

Published: Thu Sep 09 2021