Styling in React
This is my first blog post since graduating from the Flatiron School and as a result I haven’t had my days as structured as they used to be. What used to be a clear outline for me is now a mix of so much information to now learn that it becomes overwhelming, and in the process I would forget the things that I’ve learned. Cue me starting back up on writing posts to refresh my memory!
So as a little project for myself I started to create a personal website about me. So far it’s been quite fun dipping back into coding and taking a break from smashing algorithms all day! Of course, I want this website to be as pretty as can be, so I channeled my inner Salvador Dali and researched all the different designs I can do. However, I quickly remembered that styling works a bit differently in React, especially when it comes to stylizing elements from a library.
There are ways to apply standard CSS to React, however I had a bit of trouble trying to apply those styles to a Jumbotron element from Bootstrap.
I was wrapping the Jumbotron in a div but quickly found out it wasn’t responsive to the styling I would apply to the div’s class. Then I remembered you can create a style “object” in React and apply it that way.
The syntax is almost exactly the same as it would be in CSS, however instead of separating the words by dashes, you camelCase them. So things like “justify-content” in CSS would be “justifyContent” in React styling. Then, you just apply the style like so.
The end result is what is expected!
