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