edited effect hover color

Author: aleksandr105

src/components/Pagination/Pagination.jsx

@@ -2,23 +2,6 @@ import { PaginationStyled } from './Pagination.styled';
 import { PaginationItem } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-const theme = createTheme({
-  status: {
-    danger: '#e53e3e',
-  },
-  palette: {
-    primary: {
-      main: '#f59256',
-      darker: '#053e85',
-    },
-    neutral: {
-      main: '#64748B',
-      contrastText: '#fff',
-    },
-  },
-});
 
 export const PaginationComponent = ({ paginateData }) => {
   const { setPage, totalPage, page, titleRequest } = paginateData;
@@ -30,28 +13,26 @@ export const PaginationComponent = ({ paginateData }) => {
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <PaginationStyled
-        count={totalPage}
-        siblingCount={0}
-        onChange={(_, num) => {
-          setPage(num);
-          scrollToTop(num);
-        }}
-        size="large"
-        color="primary"
-        page={page}
-        renderItem={item => (
-          <PaginationItem
-            component={Link}
-            to={
-              `${pathname}?page=${item.page}` +
-              (titleRequest !== '' ? `&search=${titleRequest}` : '')
-            }
-            {...item}
-          />
-        )}
-      />
-    </ThemeProvider>
+    <PaginationStyled
+      variant="outlined"
+      count={totalPage}
+      siblingCount={0}
+      onChange={(_, num) => {
+        setPage(num);
+        scrollToTop(num);
+      }}
+      size="large"
+      page={page}
+      renderItem={item => (
+        <PaginationItem
+          component={Link}
+          to={
+            `${pathname}?page=${item.page}` +
+            (titleRequest !== '' ? `&search=${titleRequest}` : '')
+          }
+          {...item}
+        />
+      )}
+    />
   );
 };

src/components/Pagination/Pagination.styled.js

@@ -6,4 +6,18 @@ export const PaginationStyled = styled(Pagination)`
   align-items: center;
   justify-content: center;
   margin-top: 90px;
+  .Mui-selected {
+    background-color: #f59256 !important;
+    color: #ffffff !important;
+  }
+
+  .MuiPaginationItem-root {
+    border: 2px solid #f59256;
+    color: #f59256;
+    &:hover {
+      background-color: #f59256;
+      color: #ffffff;
+      cursor: pointer;
+    }
+  }
 `;