'Item' is not defined react/jsx-no-undef - react-grid-layout

Question

I imported #material-ui/core, #devexpress/dx-react-core #devexpress/dx-react-grid and some other modules but issue is not resolving.
My App.js code:
import Grid from '#material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</div>
);
}
export default App;

Answer 1

Actually definition is not there. Just place this before App() function:
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
It will work.

Answer 2

The problem is that the example provided for the Grid component is a bit misleading. I just had exactly the same trouble with the Stack component, which suffers from the same problem.
If you use the example code as-is, it gives exactly this error because it includes Item elements. This gives the impression that each of your code fragments in the control needs to be wrapped in an Item element. Unfortunately, there is no such thing (unless you happen to define one).
So the solution is simply to exclude the Item elements:
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
</Grid>
</div>
);