Monday , June 21 2021

How to make your app beautiful with styling in React –

When it comes to styling in React, there are so many ways and technology choices to beautify your web app. However, based on my personal experience, it really depends on the user interface requirements of your app to decide who to go with.

It's too easy?

If you stop here and say, "It's easy! Just Google to find the best React UI libraries, pick one, and you're good", then maybe you have not experienced painful experiences in configuring pre-stylized components in those libraries.

The longer you have to work on something, the more familiar you are and the less time you have available to solve problems. Styling in React is not an exception. However, it really requires a fair amount of time, at least for me as a self-taught developer, to be able to make a wise choice.

Therefore, my main purposes on this article are to quickly introduce the best React styling alternatives and, most importantly, try to further investigate when you should use which one.

Why styling?

Aesthetics? Functionality? Or both?

Another simple question, is not it? Well, if I change that question a little bit, "Why do you learn the right style when you start to learn React?", It may possibly trigger your thought flow.

If you're a newcomer to the React ecosystem, your first tutorials will probably teach you how to start a project, show you how to manage states and manage the props. The style is simply mentioned in the first sections of the online courses and, therefore, used minimally in your first apps.

Before you seem too serious, let me tell you that "it's all right". There is absolutely nothing wrong with what you are doing. On the other hand, it is even better to set aside style at the beginning to focus more on the logic and functionality of the app.

However, if you care about the aesthetics of your work from the beginning, you're probably not completely satisfied with your functional but minimally designed app.

Ok, enough words. Let me summarize the advantages of the style of your app, either from your first "Hello world" or from a project in which you are in the middle:

  • Beautiful user interface at the beginning – remember why React exists? To help us create a dynamic user interface. A more refined user interface helps to improve the user experience. As a result, if we put ourselves in the shoes of the users, we simply realize that the appealing design is an essential part of an application that is easy to use.
  • Good development environment – especially when you work on your parallel project. If good design makes you enjoy using it, you'll probably have more inspiration for developing an app with a design-first approach. Again, this derives from the aesthetic side of things. If you're the one who just wants it to work, this may not be applicable to you.
  • Later, the avoidance of style will overlap – Imagine that you have worked on a project for a while and suddenly see yourself thinking about how much you need to do styling. If it's just a sandbox project, then maybe it's okay. But if your app requires multiple levels of containers and elements, and responsiveness is a must, then it would be a good job to do.

So what should I use to make the app React good?

You already have an idea, let's now consider the alternatives

Online style

This approach is the easiest way to get started because it requires non-configuration and you can immediately see the result. However, even if you are familiar with CSS, pay attention to typos as they may cause headaches:

They are a square box with a black background


  • The online style is done by style properties in every DOM element, has a objecttype, in which keyit is a normal CSS property e valueit is the equivalent CSS value.
  • Because there are no hyphens like many CSS properties, you should notice capitalization like: background color, wallpaper Background image, textAlign, is flexDirection.
  • It is more well organized when defining a distinctive variable that stores all the logic of the style:
const styles = {
alertMessage: {color: & # 39; red & # 39;},
... // another style rule
Unknown error
  • You can do conditional styling. For example:
style = {{color: this.state.isWarning? & # 39; Red & # 39;: & # 39; black & # 39;}}>
Let's see if I'm a warning


  • Easy to apply, not configurable.


  • Your JavaScript files will become more messy and longer when your project becomes more complex. One way to do this is to define style variables in an external JavaScript file and import them again. However, this requires an additional step and becomes more difficult to use than the following style methods below.
  • Low development speed caused by app reloading. If you use tools like create-react-app, your app will be recharged hot whenever you make changes. If not, you must manually reload your page to see the changes. Therefore, depending on the complexity of your app, it will take a gradually longer time only for the re-rendering.

When to use?

When you started studying React, it would be the most appropriate time to take this approach. Also, if your project is small or you simply want to apply a minor style to your app. Reactivity, for example, is not really critical. So online style is good.


Ok, no more weird CSS-in-JS. Here is the original CSS you loved :), just a simple configuration before starting:

  • Create your own CSS file and import it into a JavaScript file:
import & # 39; ./ App.css & # 39 ;;
  • Add className to the item you want to apply a style to:


Note that it is now name of the class, not normal classjust a typical reaction.

  • Followed by your style rules:
.warning-message {color: red;}
  • Conditional style by setting the equivalent class name:
className = {this.state.warning? & # 39; Warning message & # 39 ;: & # 39; normal message & # 39;}>


  • Write CSS rules that are familiar to you, less risk of typing errors.
  • Benefits of CSS features like variables and multimedia queries.
  • Well organized project structure.
  • Increased development speed– this is perhaps the most pleasant side I have experienced in development. When you make changes to your CSS files, your app will no longer be played. Therefore, it will take a second for your updates to appear on the screen. The bigger and more complex your app, the more pleasure you will try to save those useless recharge times.


  • Missing features compared to SCSS, which I will elaborate on shortly thereafter.

When to use?

You can use CSS from the beginning, regardless of the size of your app. Since it is almost zero-configuration and the CSS is perhaps familiar with many, it's easy to get started quickly.

If your app is getting bigger and you have an even more complex design system, try to test the benefits of SCSS over CSS.

However, keep in mind that you will stay perfectly with pure CSS. SCSS is not really a turning point that offers all the advantages that you would not get from CSS. Recently, new features such as variables are coming to minimize the gap between CSS and its preprocessors. Also, if you've never used SCSS, it will take a few times to familiarize yourself with it.


This is perhaps my best choice for the React style. It takes all the familiarity and benefits of CSS as well as a number of very useful features to create a great package. If you're not familiar with SCSS, they have fantastic documents for you to try.

In order to use SCSS in your React app, however, it requires some configurations. If you use the app create-react, this guideline could be useful.

So let me show you the benefits of SCSS which makes it a superior choice over regular CSS.


When your project gets bigger, it's very likely that your CSS files are full of class names. Things become even more daunting when your project consists of blocks, containers and nested elements. Finding a particular class name somewhere in a file of hundreds of lines is therefore tiring and time consuming. Here is where nesting is useful:

.intro-container {
h1 {font-size: 20px};
.nested-child {
display block;
p {
margin: 0;

With this structure, for example, you want to change the style of a child element inside the input container. All you have to do now is to find her class name, that is intro-container in this case. So all the styles of his children could be found within it. Much easier, is not it?


One of the biggest advantages of mixin is the definition of breakpoints in multimedia queries. Let's take a look at this example:

// define breakpoint for mobile device
@mixin bp-mobile {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

Return to the main SCSS file:

body {
width: 60%; margin: 0 car;
@include bp-mobile {
width: 90%;

Compared to:

// set the body width to 90% on mobile devices only
body {
width: 60%; margin: 0 car;
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
@include bp-mobile {
width: 90%;

I believe it is much more natural and easier in SCSS. Like when applying style rules for an element, you have a clear view of how it looks in other windows. Therefore, changes and adjustments are made directly without the need to scroll on CSS because people normally define multimedia queries at the end of the CSS file.


This is extremely useful for making your code DRY. Let's say if you want to apply the background and the border similar for 2 buttons, except one of them has the color of the red text and the other has a blue color:

// define common rules
% button-common {
background: #fff;
edge: 1px gray fixed;
border-radius: 3px;
.button-red {
@ extend% button-common; red color & # 39 ;;
.button-blue {
@ extend% button-common; blue color & # 39 ;;

We summarize the pros and cons of SCSS:


  • Basically all CSS professionals in addition to distinctive features that make people love SCSS.


  • Requires the configuration to use.
  • It requires a certain amount of time to learn for people who are not familiar with SCSS.

React on UI libraries

Thanks to the prosperity of the open-source community, there are fantastic React libraries that you can use in your projects. Excellent resources are MaterialUI, React-Bootstrap … just to name a few.

We take MaterialUI, one of the most popular libraries, as a demo:


npm install @ material-ui / core

In order to use this, you have to rely heavily on its documentation, which is well designed and designed into, well, the material way of Google. However, if you look at an example of code for its components, it is rather daunting. My way is to simply import the component you want to use, notice some important props and customize it later.

Let's say if we want to create a button:

import {Button} from & # 39; @ material-ui / core & # 39 ;;
color = 'primary'
onClick = {() => console.log (& # 39; clicked & # 39;)}
full width
> View

Boom! A button with the "View" label, colored blue, with a width value equal to that of its parent container, appears nicely on the screen.

That's right, you can practically use all the components of the library. The advantage of using it is a seemingly lucid and modern material design. If you want to create a component yourself, it will take a lot of work and your end result may not even look as good as the pre-styled components.

So why do not we all use it?

First of all, if it appears on the screen to make it appear super easy, customizing it and adapting it perfectly to your design system is absolutely not an easy task.

One way to customize these components is to override his style, most of the times through the style prop. Another way is to give it a class name and write your own style from CSS. In this case, if your CSS is totally valid but your component does not change at all, remember to put it !important after your rules.

So when would you use React UI libraries?

If you're working on a parallel project that's small, libraries like MaterialUI are nice to use. Because you'll only have to focus on the JavaScript side of things and still have an app that looks nice.

However, when you plan to create a complex app with nested UI layers, keep in mind that sometimes it may even be faster to create your own reusable components than to try to customize those that are pre-set. In my personal experience, if you really need particular components in which they are so difficult to shape or have them behave as you wish, then use them. Otherwise, it is better to create one's own and to take full advantage of one's control over them.

So, here they are, popular ways to style in React. Of course, there are still many other large bookstores and hacks out there. Please share your bellow in the comments section. As the React community is growing bigger and bigger, we can expect an ever-increasing number of "rising stars".

In addition, the fantastic maintainers and developers of current open-source libraries will only try to make their solutions better, more refined and easier to use. All indicate a bright future ahead 🙂

Source link

Leave a Reply

Your email address will not be published.