How to Use Styled Components in React with Dynamic Props (Beginner Friendly Guide)

When building modern React applications, styling plays a major role in making the UI dynamic and reusable.

Instead of writing separate CSS files, Styled Components allows us to write actual CSS inside JavaScript and also apply styles dynamically using props.

In this blog, let's learn

1. What is styled-components
2. How to install styled-components
3. How styled-components work
4. How to pass dynamic props
5. How to style UI based on props like
   • Background color
   • Text Color
   • Border Radius
   • Image
   • Shape
   • Shadow

1. What is styled-component

Styled Components is a CSS-in-JS library that allows developers to write CSS directly inside JavaScript. It helps in creating reusable styled UI components while also enabling dynamic styling through props.

By using Styled Components, we can avoid class name conflicts and maintain a clean, component-based styling approach within our React applications.

2. Install Styled Components Package

First, install the required packages:

npm install styled-components
npm install --save-dev @types/styled-components

3. How styled-component work

Example:

import styled from "styled-components";

export const Title = styled.h1`
  color: blue;
`;

Now Title becomes a styled React component which we can use like:

<Title>Hello World</Title>

4. Dynamic Styling Using Props

The real power of styled-components comes when we pass props.
We can change the UI dynamically based on user input or state values.

5. Creating a Dynamic Card Component

Let’s create a profile card where:

• Background color is dynamic
• Text color is dynamic
• Border radius is dynamic
• Shadow is toggleable

Step 1: Create Styled Card

export const Card = styled.div<{
  bg: string;
  textColor: string;
  radius: number;
  shadow: boolean;
}>`
  width: 300px;
  padding: 20px;
  text-align: center;

  background: ${({ bg }) => bg};
  color: ${({ textColor }) => textColor};
  border-radius: ${({ radius }) => radius}px;

  transition: 0.3s;

  ${({ shadow }) =>
    shadow &&
    `
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  `}
`;

Passing Image as Background
Instead of using an <img/> tag, we can also apply image dynamically as a background.

Step 2: Create Avatar Component

export const Avatar = styled.div<{
  shape: string;
  image: string;
}>`
  width: 100px;
  height: 100px;

  border-radius: ${({ shape }) =>
    shape === "circle" ? "50%" : "12px"};

  background: url(${props => props.image})
    center/cover no-repeat;
`;

Here:

• image→ Dynamic image URL
• shape → Circle or square avatar

Using Styled Components in React
Now let’s pass these props from our React component.

Step 3: Profile Card Component

type Props = {
  name: string;
  role: string;
  bg: string;
  textColor: string;
  radius: number;
  shadow: boolean;
  shape: string;
  image: string;
};

export default function ProfileCard(props: Props) {
  return (
    <Card
      bg={props.bg}
      textColor={props.textColor}
      radius={props.radius}
      shadow={props.shadow}
    >
      <Avatar
        shape={props.shape}
        image={props.image}
      />

      <h2>{props.name}</h2>
      <p>{props.role}</p>
    </Card>
  );
}

Passing Values from State
We can now control the styles dynamically using React state.

<ProfileCard
  name="John Doe"
  role="Frontend Developer"
  bg="#ffffff"
  textColor="#000000"
  radius={12}
  shadow={true}
  shape="circle"
  image="https://i.pravatar.cc/100"
/>

Now:

• Changing bg will change background color
• Changing textColor will update text
• Changing radius will update card shape
• Changing shape will update avatar
• Changing image will update avatar background All UI updates dynamically ✨

🚀 Conclusion

Styled Components helps us:

• Keep styling close to components
• Create reusable UI
• Apply styles dynamically
• Build interactive UI easily
• Maintain clean code structure Using props, we can control the complete UI styling from React state without writing separate CSS files.

Comments

[G Gokulnath]

Awesome Content Thnx for the help