Home > Blockchain >  How to get background color onClick using styled components?
How to get background color onClick using styled components?

Time:05-26

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
         `
      ????

       `

CodePudding user response:

It's the same.

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