From dd6297d5fe215723daa09b192c325bbf8e2ea32e Mon Sep 17 00:00:00 2001 From: Sumukh <77388132+ValkonX33@users.noreply.github.com> Date: Thu, 5 Oct 2023 20:13:27 +0530 Subject: [PATCH] [Pagination] Fix background color on hover and keyboard focus when using CSS theme variables (#39220) Co-authored-by: ZeeshanTamboli --- packages/mui-material/src/PaginationItem/PaginationItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index ae902142b397fd..17dcd5b06d57c5 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -126,7 +126,7 @@ const PaginationItemPage = styled(ButtonBase, { backgroundColor: (theme.vars || theme).palette.action.selected, '&:hover': { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha( theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, @@ -138,7 +138,7 @@ const PaginationItemPage = styled(ButtonBase, { }, [`&.${paginationItemClasses.focusVisible}`]: { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha( theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,