Optimize FitCenter and FitFullScreen

src/components/FitCenter.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import '@/assets/css/fit-center.scss'
 
-const FitCenter: React.FC<React.PropsWithChildren> = (props) => {
+const FitCenter: React.FC<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = (props) => {
+    const { className, ..._props } = props
     return (
         <>
-            <div className={'fit-center'}>{props.children}</div>
+            <div className={`fit-center${className ? ' ' + className : ''}`} {..._props}></div>
         </>
     )
 }

src/components/FitFullScreen.tsx

@@ -1,21 +1,25 @@
 import React from 'react'
 import '@/assets/css/fit-fullscreen.scss'
 
-interface FitFullscreenProps extends React.PropsWithChildren {
+interface FitFullscreenProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     zIndex?: number
     backgroundColor?: string
 }
 
 const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
+    const { zIndex, backgroundColor, className, style, ..._props } = props
     return (
         <>
             <div
-                className={'fit-fullscreen'}
+                className={`fit-fullscreen${className ? ' ' + className : ''}`}
                 style={{
-                    zIndex: props.zIndex,
-                    backgroundColor: props.backgroundColor
+                    zIndex,
+                    backgroundColor,
+                    ...style
                 }}
                 ref={ref}
+                {..._props}
             >
                 {props.children}
             </div>