Change Pagination selected/Active item background color

user_5218497 0
Viewed 6233

I am using this control for pagination Link and able to get the below results.

enter image description here

I am able to change the background color of non selected/active items but how to change selected item styles like in the above image 8 is in purple color so i need it to be in different color.

Below is JS code in react

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>
reactstrap react-bootstrap reactjs
4 Answers

For changing the background of the active button you may use this.

import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(() => ({
  ul: {
    '& .MuiPaginationItem-root': {
       '&.Mui-selected': {
         background: 'red',
         color: 'white',
         // borderRadius: '50%',
       },
    },
  },
}));

const classes = useStyles();

export default function functionName(){
  <Pagination
  count={Math.ceil(array.length / numberOfItemsIWantPerPage)}
  page={page}
  classes={{
     root: classes.ul,
   }}
  />
}
user_91530630

You could use css for this. Here is working stackblitz demo.

*Note if you want to implement with your exiting style then you need to put the your logic with same css. Then it will work as well.

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

Pagination snippet

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

by overwriting .page-item.active .page-link classes style we can change the pagination color.

.page-item.active .page-link {
  z-index: 3;
  color: #fff !important;
  background-color: blue !important;
}
user_46527060

Why don't you just add the class using a variable called selected with it?

warning un-tested code!

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>

user_16083200
Related