How to use hover in styled components?

Solution

To use hover in styled components, you have use &:hover syntax in styled CCS. check out the below Snippet and Example.

Snippet

In this snippet, we will see how to use hover in styled components and then hover is used when the mouse is clicked on a text or button and its color changes.

  &:hover {
    background-color: pink;
  }

Example

In this example, we will create styled components as the button and we will &:hover pseudo-class only works for elements that can be hovered over, such as links, buttons, and other interactive elements.

Let’s start coding…

App.js

import styled from "styled-components";

const Button = styled.button`
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  &:hover {
    background-color: pink;
  }
`;

const Example1 = () => {
  return (
    <div>
      <Button>Primary</Button>
    </div>
  );
};

export default Example1;

Output

Links

codesandbox