reactjs 如何对React-paginate进行样式化

vwkv1x7d 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(106)

react-paginate不与display flex一起工作，以水平位置显示分页。
我试试这个JS代码

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

样式组件代码

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

reactjs

来源：https://stackoverflow.com/questions/75532879/how-to-style-react-paginate-with-styled-components

1条答案

按热度按时间

dly7yett1#

您应该尝试使用样式化组件：

import ReactPaginate from "react-paginate";

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

然后在你的组件中

import StyledReactPaginate from './element.styles'   

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

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs 如何对React-paginate进行样式化

1条答案

相关问题

热门标签

最新问答