React Styled Components

What Are Styled Components?

Styled Components is a popular library for React that allows developers to write CSS directly within their JavaScript code. This library leverages tagged template literals to style your components. It promotes the use of component-level styles, helping to keep the concerns of styling and element structure separated and making the overall code more maintainable.

Benefits of Using Styled Components

1. Dynamic Styling: Styled Components allows you to use JavaScript to dynamically set styles based on props, state, or any other variable.

2. Better Organization: Keeping styles close to the components they affect makes your code more modular and easier to manage.

3. No Class Name Bugs: Since styles are scoped to components, you won't have to worry about class name collisions or the specificity issues that are common with traditional CSS.

4. Theming Support: Styled Components offers built-in support for theming, making it easy to apply consistent styles across your application.

Installing Styled Components

To start using Styled Components, you need to install it via npm or yarn:

npm install styled-components

or

yarn add styled-components

Basic Usage

Here’s a basic example to illustrate how Styled Components works:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return <StyledButton> Login </StyledButton>;
}

Adapting Based on Props

Styled components are functional, so we can easily style elements dynamically.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

Theming

Styled Components also supports theming, allowing you to define a set of styles (like colors, fonts, etc.) and apply them consistently throughout your application.

First, you define your theme:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Then, wrap your application with the ThemeProvider and pass your theme:

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  </ThemeProvider>
);

Finally, access the theme properties in your styled components:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Conclusion

Styled Components is a powerful tool for React developers looking to improve the maintainability and scalability of their applications. By encapsulating styles within components and leveraging the full power of JavaScript, Styled Components provides a modern and efficient approach to styling web applications. Whether you are working on a small project or a large-scale application, Styled Components can help you keep your styles organized and your code clean.