Material-ui: Tabs component adds unrecognized prop to DOM if child <Tab/> is surrounded by extra stuff

[liesislukas]

I want tabs that are right-clickable with mouse and user would have option to open in new tab. Like all normal links <a ...> ...</a> So i add <Link/> around <Tab/> and it does the job but my console is full of errors on development env.

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

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

I wonder if i could solve this somehow? 🤔

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import {Link} from 'react-router-dom';

<Tabs
  value={this.state.tab}
  onChange={this.handleChangeTab}
  indicatorColor="primary"
  centered
>
  <Link className={'lnu'} to={'/user/account/update-details'}><Tab label={'Account'}/></Link>
  <Link className={'lnu'} to={'/user/account/password-change'}><Tab label={'Password'}/></Link>
  <Link className={'lnu'} to={'/user/account/loyalty-discount'}><Tab label={'Discount'}/></Link>
</Tabs>

| Tech | Version |
|--------------|---------|
| Material-UI | v3.0.0 |
| React | 16.4.2 |
| Browser | chrome Version 68.0.3440.106 (Official Build) (64-bit) |

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@liesislukas Tip: a > button is an invalid DOM structure. Check the API composition documentation. You have a component property.

[liesislukas]

If an anchor tag is inserted this way:

<Tab component={'a'} href={'...'} label="..."/>

then on click page reloads. Solution to this is:

<Link to={'....'}>
    <Tab component={'span'} href={'...'} label="...."/>
</Link>

but then i get same error again

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

[liesislukas]

current solution is to have extra component:

//https://github.com/mui-org/material-ui/issues/12685#
import React from 'react';
import PropTypes from 'prop-types';
import Tab from '@material-ui/core/Tab/Tab';
import {Link} from 'react-router-dom';

function TabWithLink(props) {
  const tabProps = {...props};
  delete tabProps.url;
  return (
    <Link to={props.url} className={'lnu'}>
      <Tab component={'span'} style={{opacity: 1}} {...tabProps}/>
    </Link>
  );
}

TabWithLink.propTypes = {
  url: PropTypes.string.isRequired,
};

export default TabWithLink;

So this takes all props as proxy and delivers to . While also puts around the tab. Renders perfectly and no errors.

[oliviertassinari]

@liesislukas No, the solution I was suggesting is in https://material-ui.com/demos/buttons/#third-party-routing-library:

import { Link } from 'react-router-dom'
import Tab from '@material-ui/core/Tab';

<Tab component={Link} to="/open-collective">
  Link
</Tab>

[liesislukas]

It works 👍 thanks. I thought i can provide only a string not Link :) Should read error messages to the end next time.

[ka7eh]

I'm getting the same error with MenuItems in MUI 4.5.1.
I'm using the component as it was suggested for Tabs:

<MenuItem component={Link} to="/about">
    About
</MenuItem>