src/assets/css/common.scss

@@ -104,7 +104,7 @@ $font-secondary-color: #9E9E9E;
   }
 }
 
-#loading-mask {
+.loading-mask {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -115,13 +115,13 @@ $font-secondary-color: #9E9E9E;
   background-color: rgba(200, 200, 200, 0.2);
 }
 
-#fit-fullscreen {
+.fit-fullscreen {
   position: relative;
   width: 100%;
   height: 100vh;
 }
 
-#fit-center {
+.fit-center {
   display: flex;
   justify-content: center;
   align-items: center;

src/components/FitCenter.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
     return (
         <>
-            <div id={'fit-center'}>{props.children}</div>
+            <div className={'fit-center'}>{props.children}</div>
         </>
     )
 }

src/components/FitFullScreen.tsx

@@ -4,7 +4,7 @@ const FitFullScreen: React.FC<FitFullscreenProps> = (props: FitFullscreenProps)
     return (
         <>
             <div
-                id={'fit-fullscreen'}
+                className={'fit-fullscreen'}
                 style={{
                     zIndex: props.zIndex,
                     backgroundColor: props.backgroundColor

src/components/LoadingMask.tsx

@@ -16,7 +16,7 @@ const LoadingMask: React.FC = () => {
     return (
         <>
             <FitFullScreen>
-                <div id={'loading-mask'}>
+                <div className={'loading-mask'}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
             </FitFullScreen>