Question

我正在使用此控件进行分页Link，并能够获得以下结果。

enter image description here

我能够更改未选中/处于活动状态的项目的背景颜色，但是如上图8所示，如何更改选中项目的样式为紫色，所以我需要将其设置为其他颜色。

下面是React中的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>

Answer 1

您可以为此使用CSS。这是stackblitz演示示例。

*请注意，如果要使用现有样式实现，则需要将逻辑放在相同的CSS中。然后它也会正常工作。

CSS片段

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

Answer 2

为什么不使用一个名为select的变量来添加类呢？

警告未经测试的代码！

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>

更改选定的分页/活动项目的背景色

2 个答案: