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

add, class

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.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.