Hi Im exploring ReactJs and Material UI and Im following outdated tutorials. I having a problem with this material UI makestyles how do I use this? This is the format that Im using and there are no results. As you see I update the material UI import too
styles.js
import { makeStyles } from "@mui/material/styles";
export default makeStyles(() => ({
appBar: {
borderRadius: 15,
margin: "30px 0",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
heading: {
color: "rgba(0,183,255, 1)",
},
image: {
marginLeft: "15px",
},
}));
App.js
import useStyles from "./styles";
const App = () => {
const classes = useStyles();
return (
<Container maxwidth="lg">
<AppBar className={classes.appBar} position="static" color="inherit">
<Typography className={classes.heading} variant="h2" align="center">
Memories
</Typography>
<img
className={classes.image}
src={memories}
alt="memories"
height="60"
Well I can use style inside a file but I want to make a style in another file like style.js to make it more cleaner.
const App = () => {
// const classes = useStyles();
return (
<Container maxwidth="lg">
<AppBar
style={{
borderRadius: 15,
margin: "30px 0",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
position="static"
color="inherit"
>
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
styles.js
import { makeStyles } from "@mui/material/styles";
export const useStyles = makeStyles(() => ({
appBar: {
borderRadius: 15,
margin: "30px 0",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
heading: {
color: "rgba(0,183,255, 1)",
},
image: {
marginLeft: "15px",
},
}));
import {styled } from "@mui/material";
const useStyles = styled((theme) => ({
toolbarMargin: {
...theme.mixins.toolbar
}
}));
const Header = () => {
const classes = useStyles();
return (
<Fragment>
<AppBar position="fixed">
<Toolbar>
<h1>Brand Name</h1>
<Button variant="contained" color="error" sx={{ marginLeft: "auto" }}>
Connect Wallet
</Button>
</Toolbar>
</AppBar>
<div className={classes.toolbar} />
</Fragment>
);
};