Question

更新2：

我尝试通过创建类名称来定位，但仍然无法定位ul标签，如果我能使display flex正常工作，有什么方法可以在ul标签的开发人员工具中定位ul标签吗？

 <div className={classes.paginationT}>

          <Pagination
            activePage={this.state.activePage}
            itemsCountPerPage={10}
            totalItemsCount={this.state.comments.length}
            pageRangeDisplayed={5}
            onChange={this.handlePageChange}
            className={classes.paginationT}
          />
        </div>


const styles = theme => ({

  paginationT: {
    //border :'2xpx solid red',
    color: 'red',
    display:'flex'
  }
});

更新1：

我给了display：内联到此标签，但仍然无法正常工作。

<Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={this.state.comments.length}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange}

          style={{ display: ' inline' }}
        />

我进一步调试，但不确定如何定位ul标签，因为我在分页组件内看不到任何ul标签。

我可以进行分页了，但是问题是它没有在水平方向对齐。
即使我给出的内联样式也不起作用。
我缺少任何值。
你能告诉我如何解决它吗？
在下面提供沙盒和代码段。

https://codesandbox.io/s/wnrxo98vr8 https://codesandbox.io/s/3rzvo66lwq

 <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={this.state.comments.length}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange}
        />

Answer 1

在react-js-pagination npm页面上：

该组件没有内置样式。兼容HTML布局带有Bootstrap分页样式表。

所以-它没有样式。编写自己的CSS样式由您决定100％。但是，它与引导程序样式兼容。因此，最快的方法就是添加Bootstrap样式。

npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

https://codesandbox.io/s/rm5xj7qy3q

这可能并不是您真正想要的，但是如果您阅读了文档，就会知道您所得到的。

此外，您正在使用Material Design，它具有自己的分页组件...

Read About Material Design Pagination Here。

Answer 2

请尝试自定义Ul和Li标签。请找到改进的代码。

https://codesandbox.io/s/64223kj733

分页对齐显示垂直而不是水平

2 个答案: