How to use mui Breakpoints and create a responsive ui? - reactjs

Question

I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?