This is my react Code

Question

I was trying to use createTheme & ThemeProvider to give instant look for user Interface but it makes content un-visible on UI. Read out documentation but still getting error, also searched on stackOverFlow & made bit changes. anyone knows pls help me ?

import React from "react";
import { Typography, AppBar, createTheme, ThemeProvider } from '@material-ui/core';
import VideoPlayer from "./components/VideoPlayer";
import Options from "./components/Options";
import Notifications from "./components/Notifications";

const theme = createTheme({
appBar: {
borderRadius: 15,
margin: '30px 100px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '600px',
border: '2px solid black',

[theme.breakpoints.down('xs')]: {
width: '90%',
},
},
wrapper: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
},
});

function App() {
return (
<ThemeProvider theme={theme}>
<div className="wrapper">
<AppBar className="appBar" position="static" color="inherit">
<Typography variant="h2" align="center">Video Chat</Typography>
</AppBar>
<VideoPlayer />
<Options>
<Notifications />
</Options>
</div>
</ThemeProvider>
);
}

export default App;

Answer 1

You have not provided enough information to provide you a good answer.
I see CreateTheme, ThemeProvider.
I assume you're using the Material UI Library for the React Ui Framework?
And you're trying to create a custom UI?

Make sure you have installed it and set it up correctly.
Topics that are not covered in this app aren't a good fit for this discuss section.

Howerver you may backtrack and discover what you may have missed with these guides.

https://mui.com/material-ui/getting-started/installation/
https://mui.com/material-ui/customization/theming/
https://www.welcomedeveloper.com/react-mui-theme

Answer 2

Chris Coder thanks for letting me know