ReactJS Tutorial – 20 – Styling and CSS Basics
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703429820_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 20 – Styling and CSS Basics
Alright guys in this video we are going to learn the basics of styling and CSS when it comes to react there are a couple of options to style react components the first one is regular CSS stylesheets the second one is inline styling third we have CSS modules fourth we can use
CSS in J’s libraries which work really well with react in this video we are only going to cover the first three approaches learning a CSS in J’s library would be a separate series in itself which I would like to cover sometime in the future but if you are keen on using
A library for your project I would recommend styled components alright let’s start with the first approach using regular CSS stylesheets I’m going to go back to vs code and create a new file called style sheets dot J’s so within the component folder stylesheet’ dot j s within the file I’m
Going to use the reacts lipid RFC II to create a functional component within the return statement I will simply add an h1 tag that says style sheets I will also include this file in the app component make sure to import the component at the top to specify the CSS for this
Component I am going to create a new file called my Styles dot CSS within the file I am going to create a class primary and set the color property to orange now to be able to use this class in our component we will have to import it so in style sheet component import
Dot slash my Styles dot CSS now on the h1 tag we can specify the class using the class name attribute class name is equal to primary if you save the file and take a look at the browser the text should appear in orange and you can also conditionally apply a class based on
Props or state of the component for example let me pass down a prop called primary and set it defaults so on the style sheet component primary is equal to false now I can use the props in the component has props as parameter and within the body
Let class name is equal to props dot primary then the conditional operator and if it is true we set class name to the string primary if not we set it to an empty string and we are going to use this class name variable as the value to
Our class name attribute if you now take a look at the browser you should see the text appear in black if I go back to app component pass the prop primary as true the text will be displayed in orange so basically what we are doing is reading
The value of the primary prop and if it is true we are setting a value of primary and if it is false we set it to an empty string and that class name variable is assigned as a value to the class name attribute now if you want to specify multiple classes the simplest
Option is to use template literals so in the CSS file I’m going to create a new class font Excel and I’m going to set the font size to 72 pixels now back in the component we change the value of the class name attribute to a template literal using backticks so this is going
To be backticks and because class name is a variable value we include it within dollar curly braces and then we can specify our second class font Excel if we now take a look at the browser you can see that the text is in orange and also the font size is larger both the
Classes have been applied as an alternative to template literals there is also a library called class names which you can make use of it tends to be a bit more cleaner but this is pretty much how you apply classes using regular style sheets and if necessary you can also conditionally
Apply the class based on crops or state of the component next up we have inline styling I’m going to create a new file called inline dot J s so within the components folder in line dot chairs within the file I’m going to use the reactive snippet RFC II
To create a functional component within the return statement I will add a new heading that says in line now let’s style this heading in react in line styles are not specified as a string instead they are specified with an object whose key is the camel cased
Version of the style name and the value is usually a string for example I can create a new object called heading ii steding is equal to an object we are going to set font size as 72 pixels the key is the CSS property name but as you
Notice it has to be camel cased and the value is specified as a string if you want to specify additional CSS properties simply add a comma and then list the property let’s go with color set to blue now to apply this style in line we make use of the style attribute
On the h1 tag style attribute is going to be equal to the object which is heading now let’s include this component in app component and if we take a look at the browser you should see the text in line with the styling applied so create an object and apply it to the
Style attribute inline styling is pretty straightforward finally let’s talk about CSS modules CSS modules feature is available with react scripts version 2 or higher so make sure you have updated your create react app package if it is below major version 2 and there is a file naming convention to be used for
CSS modules with create react app the file name must be suffixed with dot module dot CSS for example let me create two style sheets in the source folder so within the source folder if app styles dot CSS is a regular stylesheet then apps tiles dot module dot CSS is a CSS
Module stylesheet in the regular style sheet that is app Styles dot CSS I’m going to add a class however this is going to be colored red in the module stylesheet I’m going to add a class success which has a color of green now in the app component I am going to
Import both the files import dot slash app styles dot CSS and for the module file import Styles from dot slash app styles dot module dot CSS you can see that there is a difference in how we import a module stylesheet now to use the error class from the regular style
Sheet I’m going to add an h1 tag that says error and set the class name attribute to error to use the class from the module stylesheet I’m going to add another h1 tag success and the class name is going to be styles dot success so we access the class using the import
Statement variable name so error is our class name in the regular style sheet and success is a class name from the module style sheet and let me quickly collect the spelling if you now save all the files and take a look at the browser you should see both
The classes being applied error in red and success in green now one advantage of using CSS modules is that the classes are locally scoped by default for example if I copy the error heading into the inline component and uncomment the in line component you can see that it still works the
Heading error is in red so the CSS kind of applies to every child component as well in our code it applies to app component and inline component which is the child component and this might lead to CSS conflicts CSS modules on the other hand because you reference the
Class names using the Styles variable it cannot be used in the children component if I copy the success heading and paste it in the inline component you can see that the application doesn’t compile it doesn’t know what Styles is so you can’t accidentally use a class that is defined
For some other component so that is the CSS module approach we have covered the regular stylesheet approach inline styling and CSS modules if you want to try out a CSS in J’s package like styled components please do so by all means but this is pretty much the basics of
Styling react components thank you guys for watching Topher to subscribe and I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Completed video 20. Thank you 🙂
I have been learning React using this tutorials as am a beginner but i found that these videos are posted four years ago, Can I continue learning here or should I try finding other tutorials ??Please answer anyone.
Anybody facing a problem with className={styles.success} ?
Thank you
you the best
thank you
This is not working, I am unable to show h1 tag in the return statement
okay we are supposed to use modules thats fine but what if we use scss ? does thath mean that we have to import it in every single file that we need ?
Thanks
hello classmates
Good Explanation
Maybe this is something you wouldn't typically want to do, but could you theoretically pass module styling to a child component by using props? I could see it being useful for repetitive css that will be used by multiple children.
Thank you, you helped me a lot
what happens when your child component has an html element with className="success". would it get styled ?
Much more help to learn react… Best topic Declaratives mode teach..
import styles from './appStyles.modules.css'
className={styles.success}
doesn't work on me but when className='success' it works.
inline styling – it is an object with camelCase
styles modules – applies only to specified component. as it is imported as a variable. so wont apply inside other components…
where as other styles – apply to all child components.
i love your explanations….simple and straight forward without all the other nonsens that can confuse you…
♥️♥️♥️
Amazing, thank you
awesome explanation 🙏
Wow, this was superbly good.
I'm having an error with style module can u help
I am getting error -module not found can't resolve './appStyles.css'.please anyone tell what is solution for this
7:20 CSS modules
5:55 inline styling
2:39 conditionally apply a className based on props or state of component
how to add media query in inline css
Is CSS in css stylesheets scoped only to that component where it is imported or the CSS is available globally?
5:00 alternative to TEMPLATE LITERALS
Great tutorial…Thank you very much.
not resolved
amazing video
Very basic, very important , thank you !
Fantastic job
my code is working however I'm getting an error.
Cannot find module './appStyles.module.css' or its corresponding type declarations.ts(2307)
If you are going through the same problem,
RFCE is now RSF
i repeat
RFCE is now RSF
Please teach more about style components
Oh wow I really liked this clear explanation of the different methods. My brain was all foggy on this concept and you cleared it up nicely, thanks!
Awesome!
i was trying to create mystyles.css.but it was not possible for me…!!! finally i could not create .css file in my project. is any one can suggest about this
That was very useful, THANKS 🙂
not sure if it is be covered further in the course, but it would be nice to cover the BEM naming topic