Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PageContainer] slotProps is not inferring the actual toolbar component's props type #4512

Open
mkarajohn opened this issue Dec 5, 2024 · 2 comments

Comments

@mkarajohn
Copy link

mkarajohn commented Dec 5, 2024

Steps to reproduce

  1. Define a component to use as toolbar in PageContainer, e.g. function PageActions({ status }: { status: string }) { ... }
  2. Pass the slots and slotProps on PageContainer: ... slots={{ toolbar: PageActions }} slotProps={{ toolbar: { status: 'something' } }} ...

Current behavior

Typescript throws the following error over slotProps

TS2353: Object literal may only specify known properties, and status does not exist in type PageContainerToolbarProps

Expected behavior

The props type of PageActions component should be inferred and not throw when I pass the expected props to slotProps

Context

No response

Your environment

npx @mui/envinfo
   System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.85
  npmPackages:
    @emotion/react: ^11.13.5 => 11.13.5 
    @emotion/styled: ^11.13.5 => 11.13.5 
    @mui/base:  5.0.0-beta.62 
    @mui/core-downloads-tracker:  6.1.9 
    @mui/icons-material: ^6.1.9 => 6.1.9 
    @mui/lab:  6.0.0-beta.16 
    @mui/material: ^6.1.9 => 6.1.9 
    @mui/material-nextjs: ^6.1.9 => 6.1.9 
    @mui/private-theming:  6.1.9 
    @mui/styled-engine:  6.1.9 
    @mui/system:  6.1.9 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.9 
    @toolpad/core: ^0.10.0 => 0.10.0 
    @toolpad/utils:  0.10.0 
    @types/react: ^18 => 18.3.12 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.6.3 

Search keywords: PageContainer, slotprops, infer, toolbar

@mkarajohn mkarajohn added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 5, 2024
@mkarajohn mkarajohn changed the title [PageContainer] slotProps is not inferring the actual toolbar component's props [PageContainer] slotProps is not inferring the actual toolbar component's props type Dec 5, 2024
@bharatkashyap
Copy link
Member

Instead of passing the intended props to the custom component via slotProps, you can pass it to the custom component itself and wrap the custom component definition in a useCallback, which you can pass to the slot instead of the component function.

Something like: https://codesandbox.io/p/sandbox/cocky-morning-lccr4w

@bharatkashyap bharatkashyap added typescript component: PageContainer and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 5, 2024
@mkarajohn
Copy link
Author

Thanks; yeah, that will do for now, but i would consider this approach a workaround, I think the expected behaviour would be for the props to be inferred properly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Backlog
Development

No branches or pull requests

2 participants