[TabUnstyled] React does not recognize the `ownerState` prop
See original GitHub issueDuplicates
- 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 lowercase
ownerstate 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 🕹
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
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
React does not recognize the X prop on a DOM element ...
If you accidentally passed it from a parent component, remove it from the DOM element.
Read more >Unknown Prop Warning
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as...
Read more >Material-UI: CHANGELOG.md
[TextField] Fix conflict with Bootstrap even when label is not defined ... [TabUnstyled] Define ownerState and slot props' types (#32915) @michaldudak ...
Read more >styled() - MUI System
It uses MUI's default theme if no theme is available in React context. ... taking into account all props used internally in the...
Read more >API Reference
StyledComponent. A styled React component. This is returned when you call styled.tagname or styled(Component) with styles. This component can take any prop.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
.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, theownerState
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 theLink
component in a custom one that will stop spreading theownerState
prop, like so: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.