Component-Level Styling with Styled Components and Emotion | Styling and Components: Building User Interfaces | Next.js: A Practical Introduction for Developers

In modern web development, especially with frameworks like Next.js, managing styles effectively is crucial for building maintainable and scalable user interfaces. While global CSS files have their place, component-level styling offers significant advantages by encapsulating styles directly with the components they affect. This approach promotes reusability, reduces the risk of style conflicts, and makes it easier to reason about your UI code.

Two of the most popular and powerful libraries for component-level styling in the JavaScript ecosystem are Styled Components and Emotion. Both are CSS-in-JS libraries that allow you to write actual CSS code within your JavaScript or TypeScript files. This enables dynamic styling, theming, and a more integrated development experience. Let's explore how they work and how you can leverage them in your Next.js projects.

Styled Components

Styled Components is a popular choice that allows you to create React components with attached styles. It uses tagged template literals to define your CSS, making it feel very natural if you're familiar with standard CSS. The core idea is to create special styled components that render regular HTML elements but come with their own unique styles.

To get started with Styled Components in Next.js, you'll need to install it. You might also want to install babel-plugin-styled-components for server-side rendering (SSR) support, which Next.js leverages effectively.

npm install styled-components babel-plugin-styled-components
# or
yarn add styled-components babel-plugin-styled-components

After installation, you'll need to configure Babel. Add the plugin to your next.config.js file:

module.exports = {
  // ... other Next.js config
  experimental: {
    styledComponents: true,
  },
};

Now, you can create styled components. Here's an example of a styled button component:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #005bb5;
  }
`;

export default StyledButton;

You can then import and use this StyledButton component in your pages or other components just like any other React component:

import StyledButton from '../components/StyledButton';

function HomePage() {
  return (
    <div>
      <h1>Welcome to my Next.js App!</h1>
      <StyledButton>Click Me</StyledButton>
    </div>
  );
}

export default HomePage;

Styled Components also makes it easy to pass props to your styles, enabling dynamic styling based on component state or other logic.

const DynamicButton = styled.button`
  background-color: ${props => props.primary ? '#0070f3' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
`;

// Usage:
// <DynamicButton primary>Primary Button</DynamicButton>
// <DynamicButton>Secondary Button</DynamicButton>

Emotion

Emotion is another powerful CSS-in-JS library that shares many similarities with Styled Components. It offers flexibility in how you write your CSS, including tagged template literals (similar to Styled Components) and a css prop for inline styling.

Installation is straightforward:

npm install @emotion/react @emotion/styled
# or
yarn add @emotion/react @emotion/styled

Emotion can also be configured for SSR in Next.js. The setup is slightly different from Styled Components. You'll typically wrap your application with @emotion/server to handle SSR. Refer to the official Emotion documentation for the most up-to-date SSR setup instructions for Next.js.

Here's an example of creating a styled component with Emotion using tagged template literals, similar to Styled Components:

import styled from '@emotion/styled';

const EmotionButton = styled.button`
  background-color: #ff4136;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;

  &:hover {
    background-color: #e03127;
  }
`;

export default EmotionButton;

And here's how you might use the css prop for more inline-like styling, which is a unique feature of Emotion:

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

const cardStyle = css`
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
`;

function HomePage() {
  return (
    <div css={cardStyle}>
      <h2>Emotion Example</h2>
      <p>This card is styled using the css prop.</p>
    </div>
  );
}

export default HomePage;

Both Styled Components and Emotion provide powerful ways to manage styles at the component level in Next.js. They offer benefits like:

Scoped Styles: Styles are automatically scoped to the component, preventing global style conflicts.

Dynamic Styling: Easily create dynamic styles based on props or state.

Theming: Both libraries support robust theming solutions for consistent design across your application.

Improved Developer Experience: Write CSS directly in your JavaScript/TypeScript, leading to a more cohesive codebase.

SSR Support: Seamless integration with Next.js's server-side rendering capabilities.

The choice between Styled Components and Emotion often comes down to personal preference or team standards. Both are excellent options for building modern, maintainable user interfaces in Next.js.

import styled from 'styled-components'; const StyledButton = styled.button` background-color: #0070f3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; &:hover { background-color: #005bb5; } `; export default StyledButton;

import StyledButton from '../components/StyledButton'; function HomePage() { return ( <div> <h1>Welcome to my Next.js App!</h1> <StyledButton>Click Me</StyledButton> </div> ); } export default HomePage;

const DynamicButton = styled.button` background-color: ${props => props.primary ? '#0070f3' : 'gray'}; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; `; // Usage: // <DynamicButton primary>Primary Button</DynamicButton> // <DynamicButton>Secondary Button</DynamicButton>

import styled from '@emotion/styled'; const EmotionButton = styled.button` background-color: #ff4136; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; &:hover { background-color: #e03127; } `; export default EmotionButton;

import { css } from '@emotion/react'; const cardStyle = css` padding: 20px; border-radius: 10px; background-color: #f0f0f0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); `; function HomePage() { return ( <div css={cardStyle}> <h2>Emotion Example</h2> <p>This card is styled using the css prop.</p> </div> ); } export default HomePage;