[TabUnstyled] React does not recognize the `ownerState` prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Following the example explained here the code works as expected:

<Tabs value={currentTab}>
  <Tab label="Inbox" value="/inbox/:id" to="/inbox/1" component={Link} />
  <Tab label="Drafts" value="/drafts" to="/drafts" component={Link} />
  <Tab label="Trash" value="/trash" to="/trash" component={Link} />
</Tabs>

However, when I try to replicate a similar behavior with the TabsUnstyled this way:

<TabsUnstyled value={currentTab}>
  <TabsListUnstyled>
    <TabUnstyled value="/inbox/:id" to="/inbox/1" component={Link}>
      Inbox
    </TabUnstyled>
    <TabUnstyled value="/drafts" to="/drafts" component={Link}>
      Drafts
    </TabUnstyled>
    <TabUnstyled value="/trash" to="/trash" component={Link}>
      Trash
    </TabUnstyled>
  </TabsListUnstyled>
</TabsUnstyled>

The browser raises the following error:

Warning: React does not recognize the ownerStateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseownerstate instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I’m passing the Link component from the react-router-dom library to both the Tab and TabUnstyled, if it helps to understand the issue better.

Expected behavior 🤔

No errors thrown when using TabUnstyled.

Steps to reproduce 🕹

Code Sandbox

Context 🔦

No response

Your environment 🌎

  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.2.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/styled:  10.3.0
    @mui/base: ^5.0.0-alpha.76 => 5.0.0-alpha.79
    @mui/icons-material: ^5.6.1 => 5.6.2
    @mui/material: ^5.6.1 => 5.6.4
    @mui/private-theming:  5.6.2
    @mui/styled-engine-sc: ^5.6.1 => 5.6.1
    @mui/system: ^5.6.4 => 5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @types/react: ^18.0.3 => 18.0.9
    react: ^18.0.0 => 18.1.0
    react-dom: ^18.0.0 => 18.1.0
    styled-components: ^5.3.5 => 5.3.5
    typescript: ^4.6.4 => 4.6.4

[michaldudak]

We are in process of adding types for slots of all the unstyled components. Tab hasn’t been covered yet, but once it’s done, you won’t need // @ts-ignore.

[michaldudak]

We added the component/components props, so developers can customize the components (slots) used inside the “owner” unstyled component. To be able to customize based on the internal state of the component, the ownerState is passed into any custom component you provide. Obviously, as you noticed, this can create an issue if a component is used that simply spreads all the props it receives. To work around this problem, wrap the Link component in a custom one that will stop spreading the ownerState prop, like so:

const LinkWrapper = React.forwardRef(function LinkWrapper(props, ref) {
  const { ownerState, ...other } = props;
  return <Link {...other} ref={ref} />;
});

We need to update the docs to state what’s going on more clearly.

Please let me know if it helps.

---

@andrejstas could you please show concrete examples of your use cases (a codesandbox would be great)? We are evaluating different solutions to this problem but need to know how developers customize the components.