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

[Tooltip] className not applied from PopperProps #28991

Closed
2 tasks done
Volcomix opened this issue Oct 11, 2021 · 1 comment · Fixed by #29023
Closed
2 tasks done

[Tooltip] className not applied from PopperProps #28991

Volcomix opened this issue Oct 11, 2021 · 1 comment · Fixed by #29023
Assignees
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module!

Comments

@Volcomix
Copy link

After migrating to MUI v5.0.3, our styles are not applied anymore when using PopperProps from the Tooltip component.

I saw that a new prop componentsProps was introduced in #28692. Our styles seem working fine when using this prop but TypeScript is now asking for all the popper props to be defined.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Either className is not applied when using PopperProps or either TypeScript is yelling when assigning only the className to componentsProps.popper.

image

Type '{ className: string; }' is not assignable to type 'PopperProps & TooltipComponentsPropsOverrides'.
  Property 'open' is missing in type '{ className: string; }' but required in type 'PopperProps'.ts(2322)

Expected Behavior 🤔

Either className should be allowed to be passed to PopperProps or either TypeScript should allow to assign a partial PopperProps to componentsProps.popper.

Steps to Reproduce 🕹

https://codesandbox.io/s/popperprops-issue-zudz4?file=/src/App.tsx

Context 🔦

I am trying to use CSS modules to style the tooltip component.

Your Environment 🌎

`npx @mui/envinfo`
  System:
    OS: macOS 11.6
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    [x] Chrome: 94.0.4606.81
    [ ] Edge: Not Found
    [ ] Firefox: 92.0.1
    [ ] Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles: ^5.0.1 => 5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: ^17.0.27 => 17.0.27 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.3 => 4.4.3 
@Volcomix Volcomix added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 11, 2021
@eps1lon
Copy link
Member

eps1lon commented Oct 12, 2021

Thanks for the report. Really appreciate the flawless issue.

We end up overwriting PopperProps.className in https://github.com/mui-org/material-ui/blob/f98d52b1fcf9ab91b3e8d760bf59906c860fca49/packages/mui-material/src/Tooltip/Tooltip.js#L681-L682

@eps1lon eps1lon added bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 12, 2021
@ZeeshanTamboli ZeeshanTamboli self-assigned this Oct 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants