Search code examples
reactjstypescriptstyled-components

How to get background color onClick using styled components?

I'm trying to get background colour on Click when user clicks on any page in pagination. When I used simple css then this worked

         className ={currentPage === number? "selected":""}

when selected was a class in css as //.selected{background-color:red;} // but now I have to use React styled components. How to achieve the same outcome?

//App.tsx//

          <Button
          className ={currentPage === number? "selected":""}
          key={number}
          value={number}
        >
        </Button>

//AppStyles.ts//

  import styled from "styled-components";

  export const Button = styled.button
         `
      ????

       `
Solution

  • It's the same.

    export const Button = styled.button`
    &.selected { background-color: red; }
`;