Форматирование нумерации страниц в реагировании

Question

Итак, я изучал зависимость Pagination в ReactJS.Мой код работает нормально, но форматирование нумерации страниц совершенно не в порядке.Как я могу улучшить свои перспективы пагинации.В настоящее время он отображается в виде маркеров

`<Pagination
activePage={this.state.activePage}
itemsCountPerPage={18}
totalItemsCount={this.state.totalBooks}
pageRangeDisplayed={3}
onChange={this.handlePageChange} />`

Он отображается в браузере как прикрепленное изображение

Answer 1

Вы должны получить представление о лесах DOM и CSS:

ul {
  list-style: none;
  padding: 0;
}

ul li {
 display: inline-block;
}

ul li a {
 text-decoration:none;
 color: #999;
}

ul li a:hover, ul li a.active {
 color: #333;
}

<ul>
  <li><a href="#" /><</a></li>
  <li><a href="#" class="active"/>1</a></li>
  <li><a href="#" />2</a></li>
  <li><a href="#" />></a></li>
</ul>

Answer 2

Таким образом, я обнаружил, что в этом случае полезен мобильный степпер материала-интерфейса.Я импортировал
import MobileStepper from '@material-ui/core/MobileStepper';
Мне просто нужно было сделать простую updatePage(i) функцию, которая принимала +1 или -1 в зависимости от следующей или предыдущей страницы и соответствующие любые другие вызовы функций можно выполнить в функции обновления страницы.Следовательно, можно легко сделать нумерацию страниц, и, соответственно, может быть представлена ​​новая информация.Хотя это не совсем правильный метод, но он помог мне с моей функциональностью.
<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />

Answer 3

Из документов react-js-pagination:

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

Так что, если вы используете Bootstrap, он должен просто работать.

Если не пакет, предоставьте некоторые подпорки для установки классов для различных элементов, итогда вы должны их стилизовать:

innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...