3 Dynamic Ways to Style a React Website

Have you ever tried to dress up your React application? If you've been juggling with CSS, JavaScript, and JSX, you probably felt like a circus performer trying to balance plates on their nose. 

But fret not, intrepid developer! I'm here to show you three fashionable ways to style your React website, no clown shoes required.

Let's suit up, grab our bow ties and get this styling party started!

CSS-In-JS: Emotion

One of the biggest trends in React styling is CSS-in-JS. It's like fashion—remember when everyone thought mullets were a good idea? Well, CSS-in-JS is far better than any hairdo, and it's here to stay.

One of the shining stars of this trend is Emotion. As the name suggests, Emotion helps you add a bit of feeling into your styling (and who said developers aren't emotional?).

With Emotion, you can directly apply styles in your JS code. How cool is that?

Here's an example of how to use Emotion:

import { css } from '@emotion/react';

const color = 'darkgreen';

function HelloWorld() {
  return (
    <div
      css={css`
        color: ${color};
        font-size: 2em;
      `}
    >
      Hello World, I'm styled with Emotion!
    </div>
  );
}

export default HelloWorld;

Just look at this chunk of code; it's both beautiful and emotional. Not a dry eye in the house.

Why Emotion?

  • No class names needed: Forget about coming up with unique class names for every element.

  • Dynamic styling: You can modify styles based on props or global theme.

Styled-Components

Next up on our catwalk, we have Styled-Components. It's like your own personal stylist, only it's free and doesn't judge your current outfit.

Styled-Components is another CSS-in-JS library that allows you to create React components with styles attached. It's like a two-for-one special!

Here's a sample:

import styled from 'styled-components';

const Button = styled.button`
  background: teal;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid teal;
  border-radius: 3px;
`;

function MyStyledButton() {
  return (
    <Button>
      Click me, I'm pretty!
    </Button>
  );
}

export default MyStyledButton;

In this example, we're creating a fabulous button. It's so amazing. Even Madonna would be jealous.

Why Styled-Components?

  • Component-scoped styles: No more clashes or overrides with other styles. It's as personal as a diary entry.

  • Dynamic styling: You can adapt styles based on props.

Tailwind CSS

Finally, we have Tailwind CSS strutting its stuff. Imagine having a huge toolbox filled with tiny, reusable CSS classes. 

That's Tailwind in a nutshell—functional and stylish, like a Swiss Army knife wearing a tuxedo.

Instead of writing traditional CSS, you apply pre-defined classes directly to your JSX elements.

Here's how to style a button with Tailwind:

function MyTailwindButton() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      I'm a Tailwind-styled button, aren't I sleek?
    </button>
  );
}

export default MyTailwindButton;

Why Tailwind?

  • Utility-first: Like a good Lego set, it promotes componentization and reusability.

  • Customizable: You can easily create your own classes based on your design system.

That wraps up our styling journey. Whether you choose to express your Emotion, hire a personal stylist with Styled-Components, or go utility-first with Tailwind, your React app is sure to be the belle of the ball. 

Happy styling, and remember: in the World of CSS, you're never underdressed or overdressed; you're just one reload away from a stunning outfit.