Solution

To use classname in styled components, you have to mention attributes in your style tag, then can you use those attributes as a prop in your style CSS.

Snippet

In this snippet, we will see how to use classname in styled components and headercomp use is classname and title.

export const HeaderComp = ({ className, title }) => {
  return (
    <header className={className}>
      <h2>{title}</h2>
    </header>
  );
};

<StyledHeaderComp title="A Unique Title" />

Example

In this example, we will create styled components as the export hendercomp with header classname.

Let’s start coding…

App.js

import styled from "styled-components";

export const HeaderComp = ({ className, title }) => {
  return (
    <header className={className}>
      <h2>{title}</h2>
    </header>
  );
};

const StyledHeaderComp = styled(HeaderComp)`
  padding: 10px;
  background: #000;
  color: #fff;
  text-align: center;
`;

const Example11 = () => {
  return <StyledHeaderComp title="A Unique Title" />;
};

export default Example11;

Output

add element, array

codesandbox