Изменить выбранную нумерацию страниц / Цвет фона активного элемента - PullRequest
0 голосов
/ 31 октября 2018

Я использую этот элемент управления для нумерации страниц Ссылка и могу получить следующие результаты.

enter image description here

Я могу изменить цвет фона невыбранных / активных элементов, но способ изменения стилей выбранных элементов, как показано на рисунке 8, имеет фиолетовый цвет, поэтому мне нужно, чтобы он был другого цвета.

Ниже приведен код JS в реакции

const styles = theme => ({
    paginationItemStyle: {
        marginLeft: "5px",
        color: "white"
    },
    paginationLinkStyle: {
        backgroundColor: "#b90000",
        borderRadius: "5px",

        "&:hover": {
            backgroundColor: "#772e2e",
        },

        "&:active": {
            backgroundColor: "#772e2e",
        }
    }
});


<Pagination>

    <PaginationItem>
        <PaginationLink previous />
    </PaginationItem>

    {someNumbersList.map((i, key) => (
    <PaginationItem key={key} className={classes.paginationItemStyle} active={currentPage==(i+1)}>
        <PaginationLink className={classes.paginationLinkStyle}>
            {i+1}
        </PaginationLink>
    </PaginationItem>
    ))}

    <PaginationItem>
        <PaginationLink next />
    </PaginationItem>

</Pagination>

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Вы можете использовать CSS для этого. Здесь работает stackblitz демо.

* Обратите внимание, что если вы хотите реализовать свой выходной стиль, вам нужно поставить свою логику с той же CSS. Тогда это тоже будет работать.

Css Snippet

.paginationItemStyle {
    margin-left: 5px;
    .page-link {
        color: #fff
    }
    &.page-item {
        &.active {
            button {
                background-color: green;
                border-color: green;
            }
        }
    }
}

.paginationLinkStyle {
    background-color: #b90000;
    border-radius: 5px;
    &:hover {
        background-color: #772e2e;
    }
    &:active {
        background-color: #772e2e;
    }
}

Фрагмент пагинации

render() {

    const { someNumbersList, currentPage } = this.state;
    return (
      <Pagination>

        <PaginationItem>
          <PaginationLink previous />
        </PaginationItem>

        {someNumbersList.map((i, key) => (
          <PaginationItem
            key={key}
            className={'paginationItemStyle'}
            active={currentPage == (i + 1)}>
            <PaginationLink onClick={this.onPageClick} className={'paginationLinkStyle'}>
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem>
          <PaginationLink next />
        </PaginationItem>

      </Pagination>
    );
  }
0 голосов
/ 31 октября 2018

Почему бы вам просто не добавить класс, используя переменную с именем selected?

предупреждение непроверенного кода!

const styles = (theme, selected) => {
if (selected) {
    // whatever you want
} else { 
return {
    paginationItemStyle: {
        marginLeft: "5px",
        color: "white"
    },
    paginationLinkStyle: {
        backgroundColor: "#b90000",
        borderRadius: "5px",

        "&:hover": {
            backgroundColor: "#772e2e",
        },

        "&:active": {
            backgroundColor: "#772e2e",
        }
    }
}   
};

<PaginationItem>
    <PaginationLink previous />
</PaginationItem>

{someNumbersList.map((i, key) => (
    <PaginationItem
        key={key}
        className={(theme) => classes.paginationItemStyle(theme, currentPage === (i+1))}
        active={currentPage == (i+1)}>
        <PaginationLink className={classes.paginationLinkStyle}>
            {i+1}
        </PaginationLink>
    </PaginationItem>
))}

<PaginationItem>
    <PaginationLink next />
</PaginationItem>

...