Quick Code
Published in

Quick Code

How to Learn React #13: The 2 Important Things to Consider Before Styling Your Component

Photo by Greg Rakozy on Unsplash

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:

  1. margin-bottom: 14px
  2. padding-top: 32px
{
marginBottom: "14px",
paddingTop: "32px"
}
{
marginBottom: 14,
paddingTop: 32
}

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store