Solution
To add class in styled components, you have to pass styled css component in styled function and use class any css property..
Snippet
In this snippet, we will see add style button element and styled css class name &.my-class
set the background color
is red and the text color
white.
const Button = styled.button`
&.my-class {
color: white;
background: red;
border-color: red;
}
Example
In this example, we will import styled components library and uses it to add the class name &.my-class
to the button element and set the background color is red and the text color white.
Let’s start coding…
App.js
import React from "react";
import styled from "styled-components";
const Button = styled.button`
&.my-class {
color: white;
background: red;
border-color: red;
}
`;
export default function App() {
return (
<Button className="my-class">Click me</Button>
);
}
Output
Links
Here, we are provided code sandbox links for the above program add class in styled components. Then you can use whenever you went and do the changes as per your requirements.
Happy Coding,
I hope the above example with help you to do your task.