In this article, I would like to talk about one of the most hated topics for a beginner developer. While I was learning to code, I haven’t delt too much with the design. For me, CSS and styles did not have the priority, I was more focus on the logic of the code and to reach my goal in term of functionality. However, I started noticing that while my projects were becoming more complex and big, I needed to have some sort of design to encapsulate my code and make it pretty for people to use and see. If you make a testy cake, but you are not able to present to the people, this won’t give you the same effect you desire, and people won’t be much impressed with your hard work. The problem is that styles in Javascript is a whole different world and language, and you don’t have just to learn using it but also know how to combine colour and design. In my first three big projects, I have used pre-build design, which helped me a lot. One of my favourite websites is https://material-ui.com/. Without this website, my first projects wouldn’t be that nice and beautiful to present. I just had to read the code understand the logic and fill my code inside the template given, pretty simple. But these websites had a limit in term of usage because many things cannot be changed and when you want a particular design for a button or a card, you have to deal with what they offer you since you do not have a clue on how to design a single button by yourself. This made me feel powerless in term of fantasy and even if I was able to reach my goal in term of functionality and MVP the fact that I had to find a compromise in my design was frustrating. I decided to learn how to styles my component to the building.
I want to share with you some of the knowledge I learned on how to style component in case you want to customize your code. I will mainly focus on how to style in React. There are many different ways to style in React, one of the more simple ones is the “inline styles”.
Let’s say we want to style this h1 and give it a blue background and font-size colour red.
Notice the double curly braces. The first curly braces inject JavaScript into JSX. They say, “everything between us should be read as JavaScript, not JSX.” The inner curly braces create a JavaScript object literal. They make this a valid JavaScript object.
That’s all that you need to apply basic styles to React! Simple and straightforward. One problem with this approach is that it becomes obnoxious if you want to use more than just a few styles. An alternative that’s often nicer is to store a style object in a variable and then inject that variable into JSX. Let’s see how we can assign the previous style in a variable and use it inside our h1. First, we need to create a variable assign it to an object and right all our style inside this object
Now we need to call this object inside our h1
This will give us the exact same result but the code will be more clean and tidy and we can even create. Js file and assgin all our syle variable and exported to be used in a different component.
Style name and Syntax
In regular JavaScript, style names are written in hyphenated-lowercase:
In React the same names are written in camelCase, this does not affect the value of the property but just the name
Another difference is the numeric value, in a regular JS numeric value are always written as a string. In React, if you write a style value as a number, then the unit “px” is assumed.
To be able to share all your style with a different component is better to build a separate file where you can save all the syle and export them. Here is an example:
Now you can import this style in other components
Styled component
The styled component is another way to build reusable style component to share within all your app. This is one of my favourite way to work with style when it comes to React. First, you need to download the style component.
If now you would like to build a button to use across all our application we would create a variable, for example, MyButton and assigned to the component styled.button:
What I like about style-component is that let you use actual CSS directly in JS.
Another thinks we can do we can pass props to the button for example if we want to define a different style for the primary component we can pass props of primary and change override the style.
Let's import the CSS from the styled component to define how the primary button looks like
And this is the final result we will get for the normal button and the primary button:
