How to pass props to a component being "styled" in MUI? - reactjs

Question

Learning MUI and following the docs pretty well. However, I'm trying to style the Paper component as in the examples, but I want the Paper component to have elevation={3}.
How do I pass that prop to Paper in the below code?
import * as React from 'react';
import { styled } from '#mui/material/styles';
import Box from '#mui/material/Box';
import Paper from '#mui/material/Paper';
import Grid from '#mui/material/Unstable_Grid2';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}

Answer 1

You can pass the prop and access it. within the Styled component. Remember these are mostly passed as HTML attributes so boolean works a little differently as a string.
Here's a working example at Codesandbox. You can check how we have added a border to the item based on the prop.
import * as React from "react";
import ReactDOM from "react-dom";
import { styled } from "#mui/material/styles";
import Box from "#mui/material/Box";
import Paper from "#mui/material/Paper";
import Grid from "#mui/material/Unstable_Grid2";
function App() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item border={"true"}>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
const Item = styled(Paper)(({ theme, border }) => ({
backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: "center",
border: border === "true" ? "1px solid red" : "none",
color: theme.palette.text.secondary
}));
ReactDOM.render(<App />, document.querySelector("#app"));