修改table滚动条样式

src/hooks/useScrollStyle.ts

@@ -0,0 +1,76 @@
+import { css } from '@/theme'
+
+export const useScrollStyle = () => {
+
+
+  const scrollbar = css`
+    &::-webkit-scrollbar {
+      //width: 6px;
+      //height: 6px;
+      //background-color: rgb(252, 252, 252);
+
+      width: 9px;
+      height: 9px;
+
+    }
+
+    &::-webkit-scrollbar-track {
+      //box-shadow: inset 0 0 6px rgba(173, 173, 173, 0.15);
+      //border-radius: 10px;
+      //background-color: #fcfcfc;
+
+      border-radius: 8px;
+      background-color: transparent;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, .06);
+        -webkit-box-shadow: -1px 0 0 #fff inset, 1px 0 0 hsla(0, 0%, 100%, .9) inset, 0 -1px 0 hsla(0, 0%, 100%, .9) inset, 0 1px 0 hsla(0, 0%, 100%, .9) inset
+
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, .1)
+      }
+
+    }
+
+    &::-webkit-scrollbar-thumb {
+
+      //height: 20px;
+      //border-radius: 10px;
+      //box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
+      //background-color: #cbcbcb;
+
+      border-radius: 8px;
+      background-color: rgba(0, 0, 0, .1);
+      -webkit-box-shadow: -2px 0 0 #fff inset, 1px 0 0 #fff inset, 0 -1px 0 hsl(0deg 0% 100% / 90%) inset, 0 1px 0 hsl(0deg 0% 100% / 90%) inset;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, .4)
+      }
+
+      &:active {
+        background: rgba(0, 0, 0, .6)
+      }
+    }
+  `
+
+  const scrollbarBackground = css`
+    background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)),
+    linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .1), transparent),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .1), transparent) 0 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+
+    ${scrollbar.toString()}
+
+  `
+
+
+  return {
+    scrollbarBackground,
+    scrollbar,
+  }
+}

src/layout/style.ts

@@ -1,8 +1,14 @@
 import { createStyles } from '@/theme'
+import { useScrollStyle } from '@/hooks/useScrollStyle'
+
 
 export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
   const prefix = `${prefixCls}-${token?.proPrefix}-layout`
 
+  const {  scrollbar } = useScrollStyle()
+
+  console.log(scrollbar)
+
   const container = {
     [prefix]: css`
       
@@ -16,6 +22,17 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
         //padding-inline-start: 0;
       }
       
+      .ant-table-scroll-bar {
+      }
+      
+      .ant-table-wrapper .ant-table{
+        scrollbar-color: unset;
+      }
+      .ant-table-body{
+   
+         ${scrollbar}
+       
+      }
     `,
   }
 

src/theme/index.ts

@@ -1,4 +1,4 @@
-import { createInstance } from 'antd-style'
+import { createInstance,   } from 'antd-style'
 import { ProThemeToken } from './themes'
 
 type ProToken = {
@@ -18,6 +18,9 @@ const { createStyles, ThemeProvider } = createInstance<ProToken>({
 
 export {
   createGlobalStyle,
+  extractStaticStyle,
+        createStylish,
+        styleManager,
   css,
   cx,
   injectGlobal,