fix(Navigation, Command): Fixed ts errors

Author: chenyueban

packages/fluent-ui/src/components/Box/Box.tsx

@@ -18,7 +18,7 @@ export interface BoxProps
   as?: keyof JSX.IntrinsicElements
 }
 
-const Acrylic = styled.box`
+const Acrylic = (styled as any).box`
   position: relative;
   overflow: hidden;
   @supports (backdrop-filter: blur(10px)) {

packages/fluent-ui/src/components/Command/Command.tsx

@@ -39,13 +39,13 @@ interface Container {
 }
 
 interface CommandType extends ForwardRefExoticComponent<CommandProps> {
-  Content?: typeof Content
-  Secondary?: typeof Secondary
+  Content: typeof Content
+  Secondary: typeof Secondary
 }
 
 export const CommandContext = createContext(false)
 
-const Command: CommandType = forwardRef<HTMLDivElement, CommandProps>(
+const Command = forwardRef<HTMLDivElement, CommandProps>(
   ({ acrylic, reveal, children, ...rest }: CommandProps, ref): ReactElement => {
     const container: Container = {
       content: [],
@@ -139,8 +139,16 @@ const Command: CommandType = forwardRef<HTMLDivElement, CommandProps>(
   }
 )
 
-Command.Secondary = Secondary
-Command.Content = Content
+Object.defineProperty(Command, 'Secondary', {
+  get(): typeof Secondary {
+    return Secondary
+  }
+})
+Object.defineProperty(Command, 'Content', {
+  get(): typeof Content {
+    return Content
+  }
+})
 
 Command.displayName = 'FCommand'
 
@@ -150,4 +158,4 @@ Command.defaultProps = {
   backgroundColor: '#e6e6e6'
 }
 
-export default Command
+export default Command as CommandType

packages/fluent-ui/src/components/Navigation/Navigation.tsx

@@ -32,10 +32,10 @@ interface NavigationProps extends Omit<BoxProps, 'onChange'>, ThemeProps {
 }
 
 interface NavigationType extends ForwardRefExoticComponent<NavigationProps> {
-  Header?: typeof Header
-  Footer?: typeof Footer
-  Content?: typeof Content
-  Item?: typeof Item
+  Header: typeof Header
+  Footer: typeof Footer
+  Content: typeof Content
+  Item: typeof Item
 }
 
 interface Container {
@@ -68,7 +68,7 @@ export const NavigationContext = createContext<{
   horizontal: false
 })
 
-const Navigation: NavigationType = forwardRef<HTMLDivElement, NavigationProps>(
+const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
   (
     {
       horizontal,
@@ -158,10 +158,26 @@ const Navigation: NavigationType = forwardRef<HTMLDivElement, NavigationProps>(
   }
 )
 
-Navigation.Header = Header
-Navigation.Footer = Footer
-Navigation.Content = Content
-Navigation.Item = Item
+Object.defineProperty(Navigation, 'Header', {
+  get(): typeof Header {
+    return Header
+  }
+})
+Object.defineProperty(Navigation, 'Footer', {
+  get(): typeof Footer {
+    return Footer
+  }
+})
+Object.defineProperty(Navigation, 'Content', {
+  get(): typeof Content {
+    return Content
+  }
+})
+Object.defineProperty(Navigation, 'Item', {
+  get(): typeof Item {
+    return Item
+  }
+})
 
 Navigation.displayName = 'FNavigation'
 
@@ -172,4 +188,4 @@ Navigation.defaultProps = {
   acrylic: false
 }
 
-export default Navigation
+export default Navigation as NavigationType