выравнивание нумерации страниц по вертикали вместо горизонтали

Question

Update2:

Я попытался выполнить таргетинг, создав имя класса, но все еще не могу настроить таргетинг на тег ul. Можно ли как-нибудь настроить таргетинг на тег ul в инструментах разработчика для тега ul, если я предоставлю display flex его нормально, не могли бы вы мне помочь?

 <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'
  }
});

update1:

Я дал отображение: встроенный в этот тег, но все еще не работает.

<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

Пожалуйста, попробуйте настроить теги Ul и Li. Пожалуйста, найдите улучшенный код.

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

Answer 2

Со страницы react-js-pagination npm:

Компонент поставляется без встроенных стилей. Совместимый с HTML макетом с таблицами стилей нумерации Bootstrap.

Так что - это не идет со стилями. Вы на 100% можете написать свой собственный CSS для стилизации. Тем не менее, он совместим со стилями начальной загрузки. Поэтому самое быстрое, что нужно сделать, это просто включить стили Bootstrap.

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

https://codesandbox.io/s/rm5xj7qy3q

Это, вероятно, не совсем то, что вы хотите, но если вы прочитаете документацию, вы будете знать, что вы получаете.

Кроме того, вы используете Material Design, который имеет собственные компоненты нумерации страниц ...

Подробнее о нумерации материалов здесь .