How to style React-paginate with Styled Components

Question

The react-paginate not works with display flex to show the paagination in horizontal position.

I try this JS code

      <PaginationContainer>
        <Pagination
          previousLabel={"Previous"}
          nextLabel={"Next"}
          breakLabel={"..."}
          pageCount={Math.trunc(count / limit) + 1}
          onPageChange={handlePageClick}
        />
      </PaginationContainer>

Styled-components code

export const PaginationContainer = styled.div`
  display: flex;
  flex-wrap: nowrap;
  font-size: larger;
  color: white;
`;

Answer 1

You should try in styled components:

import ReactPaginate from "react-paginate";

export const StyledReactPaginate = styled(ReactPaginate)`
     display: flex;
     flex-wrap: nowrap;
     font-size: larger;
     color: white;
`;

and then in your components

import StyledReactPaginate from './element.styles'   

    <StyledReactPaginate
      previousLabel={"Previous"}
      nextLabel={"Next"}
      breakLabel={"..."}
      pageCount={Math.trunc(count / limit) + 1}
      onPageChange={handlePageClick}
    />