样式调整

craco.config.js

@@ -14,6 +14,24 @@ module.exports = {
     {
       plugin: CracoLessPlugin,
       options: {
+        modifyLessRule(lessRule, context) {
+          // You have to exclude these file suffixes first,
+          // if you want to modify the less module's suffix
+          lessRule.exclude = /\.m\.less$/;
+          return lessRule;
+        },
+        modifyLessModuleRule(lessModuleRule, context) {
+          // Configure the file suffix
+          lessModuleRule.test = /\.m\.less$/;
+
+          // Configure the generated local ident name.
+          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
+          cssLoader.options.modules = {
+            localIdentName: "[local]_[hash:base64:5]",
+          };
+
+          return lessModuleRule;
+        },
         lessLoaderOptions: {
           lessOptions: {
             modifyVars: {

src/global.d.ts

-declare const rctable: any;
-declare module 'rc-table' {
-  export default rctable;
-}
-
-declare const nprogress: any;
-declare module 'nprogress' { 
-  export default nprogress;
-}
-
-declare module 'react-resizable' {
-  export const Resizable:any
-}
-
-declare module 'd3v3'
-
-declare module '*' // for import jsx
\ No newline at end of file

src/index.less

@@ -371,80 +371,6 @@ svg {
   overflow: auto;
 }
 
-.react-contextmenu-wrapper {
-  display: contents;
-}
-
-.react-contextmenu {
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  color: #373a3c;
-  font-size: 16px;
-  margin-block-start: 2px;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  min-inline-size: 160px;
-  outline: none;
-  opacity: 0;
-  padding-block: 5px;
-  padding-inline: 0;
-  pointer-events: none;
-  text-align: start;
-  transition: opacity 250ms ease !important;
-}
-.react-contextmenu.react-contextmenu--visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-.react-contextmenu-item {
-  background: 0 0;
-  border: 0;
-  color: #373a3c;
-  cursor: pointer;
-  font-weight: 400;
-  line-height: 1.5;
-  padding-block: 3px;
-  padding-inline: 20px;
-  text-align: inherit;
-  white-space: nowrap;
-}
-.react-contextmenu-item.react-contextmenu-item--active,
-.react-contextmenu-item.react-contextmenu-item--selected {
-  color: #fff;
-  background-color: #20a0ff;
-  border-color: #20a0ff;
-  text-decoration: none;
-}
-.react-contextmenu-item.react-contextmenu-item--disabled,
-.react-contextmenu-item.react-contextmenu-item--disabled:hover {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.15);
-  color: #878a8c;
-}
-.react-contextmenu-item--divider {
-  border-block-end: 1px solid rgba(0, 0, 0, 0.15);
-  cursor: inherit;
-  margin-block-end: 3px;
-  padding-block: 2px;
-  padding-inline: 0;
-}
-.react-contextmenu-item--divider:hover {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-.react-contextmenu-item.react-contextmenu-submenu {
-  padding: 0;
-}
-.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
-  content: '▶';
-  display: inline-block;
-  position: absolute;
-  inset-inline-end: 7px;
-}    
-
 
 //virtual-table
 .rdg {

src/react-app-env.d.ts

-/// <reference types="react-scripts" />
+declare const rctable: any;
+declare module 'rc-table' {
+  export default rctable;
+}
+
+declare const nprogress: any;
+declare module 'nprogress' { 
+  export default nprogress;
+}
+
+declare module 'react-resizable' {
+  export const Resizable:any
+}
+
+declare module 'd3v3'
+
+declare module "*.module.less" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*' // for import jsx
\ No newline at end of file

src/view/Manage/VirtualTable/test-table.less → src/view/Manage/VirtualTable/test-table.module.less

-.virtual-table {
-  .react-contextmenu-wrapper {
-    display: contents;
+:global{
+  .rdg {
+    border: none !important;
   }
 
-  .contextMenu {
-    border: 1px solid black;
+  .rdg-header-row {
+    .rdg-cell {
+      box-shadow: none !important;
+      background-color: #f2f5fc!important;
+      border-block-end: none !important;
+      border-inline-end: none !important;
+      font-weight: normal !important;
+
+      &:before {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 1px;
+        height: 1.6em;
+        background-color: rgba(0,0,0,.06);
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        transition: background-color .3s;
+        content: "";
+      }
+    }
+  }
+
+  .rdg-row {
+    .rdg-cell {
+      box-shadow: none !important;
+      color: #363636 !important;
+      border-block-end: 1px solid #f0f0f0 !important;
+      border-inline-end: none !important;
+      outline: none !important;
+    }
+  }
+}
+
+:global(.react-contextmenu-wrapper) {
+  display: contents;
+}
+
+.contextMenu {
+  border: 1px solid black;
+  :global{
     .react-contextmenu {
       background-color: #fff;
       background-clip: padding-box;
@@ -73,18 +112,19 @@
       display: inline-block;
       position: absolute;
       inset-inline-end: 7px;
-    }     
+    } 
   }
+  
+}
 
-  .loadMoreRowsClassname {
-    inline-size: 180px;
-    padding-block: 8px;
-    padding-inline: 16px;
-    position: absolute;
-    inset-block-end: 8px;
-    inset-inline-end: 8px;
-    color: white;
-    line-height: 35px;
-    background: rgb(0 0 0 / 0.6);
-  }
+.loadMoreRowsClassname {
+  inline-size: 180px;
+  padding-block: 8px;
+  padding-inline: 16px;
+  position: absolute;
+  inset-block-end: 8px;
+  inset-inline-end: 8px;
+  color: white;
+  line-height: 35px;
+  background: rgb(0 0 0 / 0.6);
 }
\ No newline at end of file

src/view/Manage/VirtualTable/test-table.tsx

@@ -10,7 +10,7 @@ import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { nanoid } from 'nanoid';
 import { downNode, upNode } from './test-table-helper';
 
-import './test-table.less';
+import css from './test-table.module.less'
 
 export enum RowAction {
   None, Expand, Select
@@ -227,7 +227,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   return (
     <>
       <DataGrid
-        className='virtual-table'
+        // className='virtual-table'
         ref={gridRef}
 
         {...rest}
@@ -276,7 +276,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         onScroll={loadMoreRows ? handleScroll : undefined}
       />
       {contextMenu && createPortal(
-        <div className='contextMenu'>
+        <div className={classNames(css.contextMenu)}>
           <ContextMenu id={contextMenuId} rtl={false}>
             {contextMenu.menu(contextItem)}
           </ContextMenu>