React Components and How To Style Them

Rate this content
Bookmark

A comparative analysis between four methods of styling React components from inline styling to Styled-Components. This talk is best suited to beginner developers.

Jemima Abu
Jemima Abu
8 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This lightning talk explores different methods of styling React components, including inline styling, CSS stylesheets, and CSS in JS. The speaker highlights the benefits of using Style Components and Emotion, such as access to pseudo selectors, global styling, and themed elements. They also discuss the concept of polymorphism in Style Components. The speaker recommends using style components for their power and accessibility. The choice of styling method depends on project scale and personal preference.

Available in Español

1. Styling React Components

Short description:

[♪ music playing ♪ Hi everyone, I'm Jemima and today I'm going to be talking to you about styling React components. This is a lightning talk so we're gonna move fast. Basically this talk is gonna be one of those like Buzzfeed articles that's like I tried out five different methods of styling with React so you don't have to. So these are the methods I've tried out over, you know, time. Inline styling, CSS stylesheets, and CSS in JS. So we're just gonna go into each of them real quick and then just see what they are. Style Components are, basically think of them as like template literals. You know, you have your CSS properties and just pass them as a template literal. So they're really great because it gives you all the benefits of like inline styling, but also like CSS files because you have access to like your pseudo selectors, you have access to global styling, you can set like themed elements, it's just, Style Components are just really useful. They're like really powerful when it comes to styling. And the same for Emotion as well, most CSS and JS libraries support specifically Style Components. Another reason I love Style Components because they really help you with like accessibility. A lot of times you can just define the elements as using the semantic label, like the semantic element name, and it will render it semantically, which is great. Another really cool thing about Style Components is this thing called polymorphism, which is just like a fancy way of making one element look like another element.

[♪ music playing ♪ Hi everyone, I'm Jemima and today I'm going to be talking to you about styling React components. This is a lightning talk so we're gonna move fast. Basically this talk is gonna be one of those like Buzzfeed articles that's like I tried out five different methods of styling with React so you don't have to.

Basically when I first got started with styling in React components I used to run into a bunch of like annoying errors like you nested components in another component and then the style is getting overridden or you have layout problems you're trying to put a fixed component in a flex container and it's not fitting in the flow or you have to start figuring out how to be naming components and sub components and sub sub components. Or you have to be real specific with how you target your elements.

So basically I had all these problems and asking for a styling method that was easy for me to use and learn because it was like there was a switch from how you style in HTML to how you style in React and I did something that was kind of similar for me, something that helped me maintain file structure and code structure, something that was optimized because of course performance is important, and something that could be used across multiple components, and it was scalable. So these are the methods I've tried out over, you know, time.

Inline styling, CSS stylesheets, and CSS in JS. So we're just gonna go into each of them real quick and then just see what they are. So for inline styling that's just your regular, regular putting the style method in like the elements as an attribute. I use this mostly for overriding existing styles because inline styling does have a very high specificity and for passing a star properties as props, things like when you need to set a background image as a prop, really great for that. With the CSS stylesheets, that's your CSS files, your CSS modules, and your pre-processors, and Tailwind style sheets, but it wasn't really CSS in JS, I just kept it here. I saw someone on Twitter called it CSS in HTML, which I think is very apt. So yeah, this is how you just have your regular CSS files and then you can use them for, I really like CSS files because they are very useful for putting the stylesheets directly with the elements you're working on, so it's great for like co-locating and it's just easier to know where the changes you need to make are. For handling global styling you can just pass in a global method target all elements and pass them to your app.js and it's great. For nested styling, if you're using your pre-processors, you can kind of include your style names in the global nest of the component name, and that really prevents that whole overwriting error that I was running into earlier. So that's great. Tailwind is something I recently started working with and maybe it's just me personally I didn't like it, because it took me two days to figure out how to set it up, but I included it here for intuitivity's sake. Basically Tailwind kind of works with utilities, utilities are like let's say pre-existing class names that just have all these properties already, so you don't start defining them, so for example like py2 would be a padding top and bottom property of whatever you define the 2 to be, so that could be like one REM. Tailwind is really good for if you have like a design system across, let's say you work with a company that uses the same design system across multiple projects, you can just kind of define all those properties like your modding or your padding or your colors in your Tailwind.config.js file and you can import that across multiple projects and it's great. CSS and JS, when I first heard about CSS and JS I was like, CSS and Javascript? That's ridiculous, and now I'm like, why isn't everything in Javascript? This is the best thing ever. So I've worked with Style Components and Emotion, I haven't worked with JSS but I just put it there because I thought the name was very apt because CSS and JS. Style Components are, basically think of them as like template literals. You know, you have your CSS properties and just pass them as a template literal. So they're really great because it gives you all the benefits of like inline styling, but also like CSS files because you have access to like your pseudo selectors, you have access to global styling, you can set like themed elements, it's just, Style Components are just really useful. They're like really powerful when it comes to styling. And the same for Emotion as well, most CSS and JS libraries support specifically Style Components. Another reason I love Style Components because they really help you with like accessibility. A lot of times you can just define the elements as using the semantic label, like the semantic element name, and it will render it semantically, which is great. Another really cool thing about Style Components is this thing called polymorphism, which is just like a fancy way of making one element look like another element.

2. React Styling Methods

Short description:

For example, you can pass a style div element as a button element, allowing you to reuse styling for links and buttons. From my experience, style components are my favorite method, but they have a learning curve and require installation. Tailwind, while not my preference, is still a fine framework. The choice of method depends on the project scale and personal preference. Check out the slides and links on my website for more details. Thank you for listening!

For example, here I have a style div element, and I have a style button element. I am passing in the button element to my prop. What is going to happen is that my elements, the style div element, is actually going to render as a button element. This is really useful for when you have, let's say, you have links and buttons that need to have the same styling, but you don't want to start like overriding all the button styling, like all the buttons default styling, you can just be like passing style button as link or passing link as style button. And the link render as a button or the button render as a link, depending on how you made it work.

This is like a little chart I came up with from my experience and my preferences. It's not like saying this is the one method that is better than this. It's just like how I found them. From this chart, I would say my favorite method is definitely style components, just that it was a bit hard for me to pick up, you know, there's a bit of a learning curve, and it's not very easy to set up. You have to install a lot of things. Tailwind was my least favorite, not because it's bad just because I just could not get my head around it. I could not figure out how to set it up. I could not figure out how to use it. I had to, like, literally to date, if I'm using Tailwind, I have to Google whatever property I'm trying to define. I just do not know these things off hand. But yeah, I think it's still a fine framework, if that's what you're into. Of course, each of these methods are suited to a particular kind of, you know, it's kind of that's what your project needs. You know, if you're doing like a large scale project, you might want to use like a style component or CSS file because you can attach multiple files that way. If you're doing something small scale, you could stick to like Tailwind, for example, because that way, you don't need to start thinking of class names and stuff. You can just pass in the utilities. So you know, it all depends on what you prefer.

So yeah, that's about it. Like I said, lightning talk for you real quick. I do have slides for this. These are the slides to the original version of this talk, which is much longer and does include a more specific point for each styling method, you can see it on my website jemimaabu.com slash slides slash styling hyphen react. So you can check it out there. I also included some links for more on react styling methods you can read up on there are really good, really useful, you can check them out there. That's about it. For me. Thank you so much for listening. If you do have any questions, I think there's going to be a I could q&a with the MC after this, or my thing, there's an advice lounge, either way, you could just like reach out to me there. Or you could fill out the contact form on my site jemimaabu.com, or send me a message on Twitter or LinkedIn. You'll find me online everywhere at jemimaabu Thank you for listening and have a pleasant rest of the talk.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
The Worlds Most Expensive React Component and How to Stop Writing It
React Advanced Conference 2021React Advanced Conference 2021
23 min
The Worlds Most Expensive React Component and How to Stop Writing It
We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.
CCTDD: Cypress Component Test Driven Design
TestJS Summit 2022TestJS Summit 2022
25 min
CCTDD: Cypress Component Test Driven Design
The first part of the talk will focus on a variety of patterns when using Cypress Component Testing and TDD to create React components. The code samples will be from Angular's Tour of Heroes to make the content relatable to a wider community. Currently I am working on a GitBook rewriting it in React using Cypress Component Tests, there should be plenty of content to distill into the talk.The second part of the talk will focus on test strategies, types of testing and where to apply them, and finally compare & contrast them to the familiar industry approaches.We will finish with key takeaways, sample application repos to help with learning, and rollout strategies.
Generic Components with TS and React
React Day Berlin 2022React Day Berlin 2022
10 min
Generic Components with TS and React
What is a generic component? How to write them? When to use it?

Workshops on related topic

Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
Crash Course into TypeScript for content from headless CMS
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production