How to Learn React #13: The 2 Important Things to Consider Before Styling Your Component
Hello and welcome to the next chapter of series which will help you understand what React is and how can you use it to write awesome web applications. As I promised in the previous chapter we’re gonna finish line through in the meal title. We’re gonna achieve that with css property text-decoration: line-through . Okay so first let’s talk how we actually can add styles to our application. This first approach is to use inline styles
Styling component with inline styles
As we know each html element has style attribute where we can specify css properties to make the element look better. Now the tricky thing here is that in React we need to pass Javascript object to the style property. This object needs to be key, value pair object where key is the css property written in camel case and the value is value of the css property. Now let’s say you want to add these two styles to your element:
- margin-bottom: 14px
- padding-top: 32px
I know I know…Your first thoughts are why would I do something awful as that. This is just an example. Your javascript object would look like this
{
marginBottom: "14px",
paddingTop: "32px"
}or this way…When value is numeric you just pass it as number
{
marginBottom: 14,
paddingTop: 32
}Ok so we have our style defined. We can store it to the variable and then pass the variable to element in following fashion.
Or we don’t have to store it at all and just pass it like this
Okay so this was one approach. The pros of this approach is that you don’t have to create separate style sheet. The cons is that it doesn’t look so good and in many cases you need to use more complex styles. This can cause your file will get bigger only because of the styles. Also you can’t use pseudo elements like span:hover with this approach. Now let’s try different approach which is using CSS modules.
Styling component with CSS modules
I guess you saw this one coming. Yeah we can just create separate file and import it to our component. It’s really easy so let’s go ahead and do it. We need to create new file. Let’s call it same as the component but with the extension .css
This is just normal CSS file. I took the properties we used before and assigned for the class meal-title. Now we’ll just add this class to the element we want. First we need to import the CSS file to our component. Them assign the class and our code will look like this
Notice that we’re not using class attribute but className. I don’t want to bother you why it is like that but I just tell you it will eventually be class attribute and when you check it on browser you’ll see that. Pros of this approach is that you have styles separated in CSS module. This way each component can have its own CSS module. And you can also use pseudo elements.
Now finally finish our application
Okay so we know how to use css and we can finally finish the functionality of our app. In MealPlanItem.css for meal-striked add text-decorationproperty with value line-through.
And in MealPlanItem.js we’re gonna tell this…When the meal is completed we want to use this meal-striked className for the <span> element, which eventually hold the meal title. And if it’s not, don’t use the class. It will look like this
Again just to refresh the memory how the following syntax works
props.completed && ‘meal-striked’
If the expression before && is evaluated as true return what is after &&. And that should be it. Let’s go ahead and play with the application. Now it works as we wanted. We did it…
Don’t be shy…applaud yourself and if you liked the story you can applaud also for the story and let the world know of your achievement. If you didn’t read previous stories of this series make sure to check them out here. If you have some comments feel free to ask in the comments section. I‘ll gladly answer any of your questions. Stay tuned for the next story where we’re gonna import external CSS library to our application and add some “look” to it. Until then have a nice day and enjoy…Cheers!
