Sticky Table Header with React Hooks (webup.org)
Dec 01, 2020
Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
Comparing Styling Methods In Next.js (smashingmagazine.com)
Sep 17, 2020
Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial.
How To Use Styled-Components In React (smashingmagazine.com)
Jul 23, 2020
While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS.
How to Make a List Component with Emotion (css-tricks.com)
Jul 08, 2020
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with.
Building Reusable React Components Using Tailwind (smashingmagazine.com)
May 25, 2020
Styling Components In React (smashingmagazine.com)
May 14, 2020
Add Theme-ui to Next (richardhaines.dev)
Apr 24, 2020
Today i decided to finally take the plunge and start learning NEXTjs. I've been working with Gatsby for two over years now, have created many sites and themes and generally feel very comfortable in that environment. But it was time, finally to bite the bullet and see what all the fuss was about!
Styled System Revisited (varun.ca)
Apr 19, 2020
Much has changed in the world of Styled System since my last post. There are fewer packages to deal with; it is much more performant and has a more straightforward and powerful API.
Converting CSS In React to Styled Components (scotch.io)
Mar 31, 2020
Styled Components is one of those interesting topics that developers love to argue about. It's a brand new way of doing things that many people just aren't ready to acknowledge. Regardless, just because something is different doesn't mean it isn't worth a try.
Using Tailwind CSS with Create React App (daveceddia.com)
Mar 30, 2020
I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes.
Getting started with styled-components in React (emgoto.com)
Mar 13, 2020
If you’re looking for a way to write easily maintainable and portable CSS in React, you may be interested in using the styled-components library. It’s one of a number of CSS in JS libraries that let you skip some of the pains that you may otherwise experience dealing with large and unwieldy .css files.
Styling React Native Apps (alligator.io)
Feb 12, 2020
If you ever used React Native, you probably realized it doesn’t use normal HTML & CSS like a web application. In this guide, we will discuss the differences. And one of the main differences you will see is everything is automatically styled based on Flexbox.
Why styled-components? (medium.com)
Feb 04, 2020
One question I see on Twitter and such often is why a developer should choose styled-components over other CSS-in-JS libraries (and other forms of CSS in general).
Understanding CSS-in-JS (telerik.com)
Jan 02, 2020
How to use CSS Modules in React? (robinwieruch.de)
Oct 19, 2019
CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.
8 Ways to Style React Components Compared (sitepoint.com)
Oct 17, 2019
There are various ways to style React Components. Choosing the right method for styling components isn’t a perfect absolute. It’s a specific decision that should serve your particular use case, personal preferences and above all, architectural goals of the way you work.
Preferred Color Scheme in React (dev.to)
Sep 29, 2019
I have a demo that, on the fly, is able to swap the users theme from light to dark. It also remembers the persons last selected choice by saving that selection of 'dark' or 'light' to localStorage and checking there first when setting the theme on the next user visit.
Draggin’ and Droppin’ in React (css-tricks.com)
Aug 16, 2019
The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality, and if they do, it becomes very complex.
How to add a dark mode to your React web app (dev.to)
Aug 16, 2019
We are currently living in a dark mode in everything era. Most apps nowadays come with a switch either at the navbar or just somewhere around its settings, that you just click and the screen goes dark.
Using styled-components in Gatsby (alligator.io)
Jul 10, 2019
When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!
Re-invent all the wheels! (sid.studio)
May 10, 2019
My favorite way of wrapping my head around such questions is to try to implement the thing myself. So, I built a mostly-useless css-in-js library.
Getting 60fps Animations in React (alligator.io)
Apr 16, 2019
In this article, learn some CSS “hacks” to get 60fps animations in React.js. If you haven’t been using them already, you might kick yourself once you see they can be the difference between jittery and silky smooth animations.
React Styled Components Tutorial (robinwieruch.de)
Mar 30, 2019
An example of the CSS-in-JS approach is styled-components. Styled Components allow you to write plain CSS in your components without worrying about class name collisions. It helps to write CSS that’s scoped to a single component and does not leak to any other element in the page.
Styling Next.js with Styled JSX (nextjs.org)
Mar 28, 2019
Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
Simplifying Responsive Layouts with React Hooks (hackernoon.com)
Mar 04, 2019
Since the release of React 16.8, I’ve been enjoying the ability to use hooks to create composable and reusable logic, and write fewer class components with explicit lifecycle methods. This not only leads to a more enjoyable dev experience, but (in my opinion) a more readable code base.
Feb 18, 2019
Component Based Design System With Styled-System (varun.ca)
May 11, 2018
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design constraints. It builds upon ideas such as Atomic Design, Style Guides and Component-Based Architecture.