foreign-sapphire•10mo ago

Unable to use Header in ThemedLayoutV2

I'm following the instructions here https://refine.dev/docs/api-reference/antd/theming/#switching-to-dark-theme and I get this error:

Type 'FC<HeaderProps>' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '{}' is not assignable to type 'HeaderProps'.
    309 |             )}
    310 |           >
  > 311 |             <ThemedLayoutV2 Header={Header} Sider={SideMenu}></ThemedLayoutV2>
        |                             ^^^^^^
    312 |           </Refine>

Type 'FC<HeaderProps>' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '{}' is not assignable to type 'HeaderProps'.
    309 |             )}
    310 |           >
  > 311 |             <ThemedLayoutV2 Header={Header} Sider={SideMenu}></ThemedLayoutV2>
        |                             ^^^^^^
    312 |           </Refine>

Theme | refine

Ant Design allows you to customize design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.

3 Replies

kapa.ai•10mo ago

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing is due to TypeScript's strict type checking. It's saying that the Header component you're trying to use as a prop in ThemedLayoutV2 is expecting props of type HeaderProps, but you're not providing any. The Header component is defined with HeaderProps which expects two props: theme and setTheme. Here's the definition of HeaderProps and Header from the documentation (https://refine.dev/docs/api-reference/antd/theming/#switching-to-dark-theme):

interface HeaderProps {  
 theme: "light" | "dark";  
 setTheme: (theme: "light" | "dark") => void;  
}  
  
const Header: FC<HeaderProps> = (props) => {  
 // ...  
};

interface HeaderProps {  
 theme: "light" | "dark";  
 setTheme: (theme: "light" | "dark") => void;  
}  
  
const Header: FC<HeaderProps> = (props) => {  
 // ...  
};

When you use Header in ThemedLayoutV2, you need to provide these props. Here's how you can do it:

const App: React.FC = () => {  
 const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("dark");  
  
 return (  
 <ConfigProvider  
 theme={{  
 algorithm:  
 currentTheme === "light"  
 ? theme.defaultAlgorithm  
 : theme.darkAlgorithm,  
 }}  
 >  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2 Header={() => <Header theme={currentTheme} setTheme={setCurrentTheme} />}>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

const App: React.FC = () => {  
 const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("dark");  
  
 return (  
 <ConfigProvider  
 theme={{  
 algorithm:  
 currentTheme === "light"  
 ? theme.defaultAlgorithm  
 : theme.darkAlgorithm,  
 }}  
 >  
 <Refine  
 /* ... */  
 >  
 <ThemedLayoutV2 Header={() => <Header theme={currentTheme} setTheme={setCurrentTheme} />}>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </ConfigProvider>  
 );  
};

In this code, we're passing a function that returns the Header component with the required props to ThemedLayoutV2. This should resolve the TypeScript error you're seeing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•10mo ago

okay the docs are incorrect though