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
kapa.ai8mo 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
kapa.ai8mo ago
<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
multiple-amethyst
multiple-amethyst8mo ago
okay the docs are incorrect though