there are many flavors on how to write css in react.js which is great as we can code according to our style and preference in this video we will look on five ways on how to write css in react.js application the first way to write css is a plain vanilla css which is what we are all familiar of to see this quickly in action we will add a basic button primary class on this stylesheet with a few css declarations in it then on the app.js we need to import the css file and add the class name into the
element we want to apply the style this approach is a very basic way to style a react application the second approach to write css in react is inline style which can be the most direct and straightforward way using the same example previously instead of using class name style prop is used passing in an object with all the styles that the element need you can notice the difference between a typical css and inline style by looking at these examples inline styles values are wrapped in codes and is
comma separated css properties that are hyphen are converted to camel case styling elements inline doesn't require you to create a separate stylesheet as styles are applied directly to the elements as you can see on our example this might be useful for small proof of concept or small applications the third way to add css in react is utilizing css frameworks that will provide the flexibility and powerful tools that doesn't exist in traditional css we will use sas on this example to get started we
have to define a file ending with scss or sass depending on your choice of style the differences are the curly braces and semicolons when we import the sas file we need to ensure the file has the correct extension a great advantage of css frameworks it allows us to write clean elegant and less css the fourth way of writing css in react.js is css modules which can use either normal css or sas stylesheets we will use sas for the demo notice that the sas file has the name module in it just before
the extension scss let's add button primary class on this file that we will use to style a button now on the javascript file we will import the css module as styles the final step is to add the bottom class following the object notation that we are all familiar with the benefit of css modules is it helps to avoid the problem of class conflicts with normal css the css properties that we are referencing turns into unique class names that cannot conflict with another class when our project is built
css modules solve the problem of global scope in css create react app comes with css modules so you can start using this with no setup the last and final approach is css in js which allows us to write css styles directly in our components javascript files on this example we will import the styled component library then we will create a component and export it this div here can be any html tag but we will use a button as that is what we are trying to create i will add in some basic styles so we
can see that this is working very cool this also supports sas like syntax for nesting styles just like what you see on the screen one advantage of style component is we can add change remove css without any surprises changing one component style will not impact the styles of other components in the application so after seeing the different ways to style a react js application which one would you prefer to use and why please leave a comment below and tell us what will you be using on your next re
act project i hope this video gave you a good understanding of how to style a react.js application and i do hope you enjoy it please like and subscribe and i will see you next time click these videos for similar videos like this
Comments