Develop Reference

How to pass styles from material icons ui v4 to v5 maintaining the same styles?

So i was currently following a tutorial where they were using material ui icons but with the version from a year ago, i had to made some changes as i followed the tutorial. But then the styles part came along and i don't know how to change the styles to they work in version five of material ui.
Here is the jsx code he uses:
import { AppBar, Toolbar, Typography, InputBase, Box} from '#material-ui/core'
import SearchIcon from '#material-ui/icons/Search'
import useStyles from './styles'
const Header = () => {
const classes = useStyles();
return (
<AppBar position='static'>
<Toolbar className={classes.toolbar}>
<Typography variant = 'h5' className={classes.title}>
Travel Advisor
</Typography>
<Box display = 'flex'>
<Typography variant = 'h6' className={classes.title}>
Explore new places
</Typography>
{/*<Autocomplete>*/}
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase placeholder="Search..." classes={{root: classes.inputRoot, input: classes.inputInput}}/>
</div>
{/*<Autocomplete>*/}
</Box>
</Toolbar>
</AppBar>
)
}
export default Header
Here is the styles.js code he uses:
import { alpha, makeStyles } from '#material-ui/core/styles';
export default makeStyles((theme) =\> ({
title: {
display: 'none',
\[theme.breakpoints.up('sm')\]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.25) },
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
\[theme.breakpoints.up('sm')\]: { marginLeft: theme.spacing(3), width: 'auto' },
},
searchIcon: {
padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0), paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', \[theme.breakpoints.up('md')\]: { width: '20ch' },
},
toolbar: {
display: 'flex', justifyContent: 'space-between',
},
}));
How do i make it work with the most recent version of material ui?

Instead of makeStyles you define a theme and then wrap your app in a theme provider:
Theme file:
export const theme = createTheme({
palette: {
primary: {
main: '#2e7e89',
},
secondary: {
main: '#8eb9ff',
},
},
typography: {
fontFamily: "'Outfit', sans-serif",
button: {
textTransform: 'none',
},
})
App.tsx:
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
You can also use the sx prop to customize your styles: https://mui.com/system/getting-started/the-sx-prop/
<Button
sx={{
display: 'flex',
marginRight: { xs: '8px', md: '15px', lg: '18px' },
padding: 0,
fontSize: '14px',
}}
>
A button
</Button>

How do I convert a dropdown which switch between all and fav reports into single button in react js?

I had a drop-down for switching reports type all to fav. Now I want to change it into a single button, a Single button which initially shows All reports then clicks onto it changes to Fav reports and then re-click to initial state
image of drop down i created
code for component dropdown yourReportDropDown.js
import React, { useState, useEffect } from "react";
import {
Grid,
Typography,
Paper,
makeStyles,
createStyles,
} from "#material-ui/core";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import ClickAwayListener from "#material-ui/core/ClickAwayListener";
import Popover from "#material-ui/core/Popover";
import Radio from "#material-ui/core/Radio";
import ReportIcon from '../../../../images/allReport.png';
import FavoriteIcon from '../../../../images/favorite.png';
const useStyles = makeStyles((theme) =>
createStyles({
rowAlign: {
display: "flex",
flexDirection: "row",
},
fontStyle: {
fontFamily: "Montserrat",
},
scrollBar: {
"&::-webkit-scrollbar": {
width: 5,
borderRadius: 17,
},
"&::-webkit-scrollbar-thumb": {
background: "#ffB800",
borderRadius: 17,
},
},
onHover:{
"&:hover": {
backgroundColor: '#fff7e1'
},
}
})
);
const YourReportDropDown = (props) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
setRotateVal(180);
};
const handleClose = () => {
setAnchorEl(null);
setRotateVal(0);
};
const open = Boolean(anchorEl);
const [rotateVal, setRotateVal] = useState(0);
const handleSelected = (e, filterType, element) => {
props.handleChange(e, filterType, element);
handleClose();
};
useEffect(() => {}, [props.dropDownList]);
// console.log("countries", props.dropDownList);
return (
<ClickAwayListener onClickAway={handleClose}>
<div
style={{
width: "100%",
width: 211,
marginLeft: props.filterType === "category" ? 45 : 0,
}}
>
<div
className={classes.rowAlign}
style={{
padding: "10px",
justifyContent: "space-between",
backgroundColor: "#e3e9ff",
alignItems: "center",
borderRadius: 4,
cursor: "pointer",
}}
onClick={(event) => handleClick(event)}
>
<div className={classes.rowAlign} style={{ alignItems: "center" }}>
<img
src={props.selectedFields === 'All' ? ReportIcon : FavoriteIcon}
style={{ width: 20, height: 20 }}
/>
<Typography
className={classes.fontStyle}
style={{
fontSize: 18,
marginLeft: 13,
width: 123,
textAlign: "left",
}}
noWrap
>
{props.selectedFields}
</Typography>
</div>
<ExpandMoreIcon style={{ transform: `rotate(${rotateVal}deg)` }} />
</div>
<Popover
open={open}
onClose={handleClose}
anchorEl={anchorEl}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
style={{
marginTop: 10,
width: "100%",
}}
>
{props.dropDownList.map((element, index) => {
return (
<div
className={classes.onHover}
key={element}
value={element}
style={{
width: "100%",
justifyContent: "space-between",
margin: "5px 5px",
width: 201,
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor:'pointer'
}}
onClick={(event) =>
handleSelected(event, props.filterType, element)
}
>
<Typography className={classes.fontStyle}>
{element}
</Typography>
</div>
);
})}
</Popover>
</div>
</ClickAwayListener>
);
};
export default YourReportDropDown;
Section Container where i am using this drop-down code SectionContainer.js
import React, {useState} from "react";
import {
createStyles,
makeStyles,
Typography,
Grid,
Paper,
Tooltip,
withStyles,
Zoom,
InputAdornment,
} from "#material-ui/core";
import ReportCard from "../reportCard";
import YourReportDropDown from "./component/yourReportDropDown";
import YourFav from "./component/fav";
const useStyles = makeStyles((theme) =>
createStyles({
tooltip: {
backgroundColor: theme.palette.common.white,
boxShadow: theme.shadows[4],
fontSize: 14,
fontFamilt: "Lato",
fontWeight: "bold",
padding: 10,
color: "#141414",
},
rowAlignMent: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
},
linkHover: {
textDecoration: "none",
color: "#141414",
"&:hover": {
color: "#141414",
textDecoration: "underline",
},
},
formControl: {
// minWidth: 180,
// borderRadius: 8,
// margin: theme.spacing(1),
display: "flex",
// alignItems:'center',
padding: "0px 5px",
justifyContent: "center",
width: 260,
height: 38,
backgroundColor: "#f5f5f5",
borderRadius: 5,
fontFamily: "Montserrat",
"&:hover": {
borderWidth: 0,
border: "none",
},
},
selectEmpty: {
marginTop: theme.spacing(2),
},
selectInput: {
padding: "5px 10px",
fontFamily: "Montserrat",
fontSize: 18,
fontWeight: "600",
// backgroundColor:"#f5f5f5"
},
selectStyle: {
fontFamily: "Montserrat",
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "none",
borderRadius: 4,
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: "none",
borderRadius: 4,
},
},
scrollBar: {
"&::-webkit-scrollbar": {
width: 4,
borderRadius: 38,
background: "#F0F0F0",
},
"&::-webkit-scrollbar-thumb": {
background: "#ffb800",
borderRadius: 38,
},
},
})
);
const SectionContainer = (props) => {
const classes = useStyles();
const { reports,sectionText, filter, handleChange } = props;
const [filterValues, setFilterValues] = useState(['All', 'Favorites'])
return (
<Grid item xs={6}>
<Paper
elevation={0}
style={{
display: "flex",
flexDirection: "column",
padding: "16px 24px",
// height: "auto",
height:427,
backgroundColor: "#FFFFFF",
borderRadius: 10,
width:window.innerWidth < 760? "90vw" : null
}}
>
<div className={classes.rowAlignMent} style={{ alignItems: "center" }}>
<Typography
style={{
fontFamily: "Montserrat",
fontWeight: "500",
fontSize: 30,
color: "#181818",
marginBottom: 5,
textAlign: "left",
}}
>
{sectionText}
</Typography>
{sectionText === "Your Reports" && (
<YourReportDropDown
initialValue={"Type"}
selectedFields={filter}
dropDownList={filterValues}
handleChange={handleChange}
filterType={"persona"}
// imgPath={PersonaIcon}
/>
)}
</div>
<div
style={{
display: "flex",
marginTop: 5,
height: '100%',
overflowY: "auto",
padding: 10,
alignItems:
sectionText === "Other Reports Relevant To You"
? "center"
: "flex-start",
}}
className={classes.scrollBar}
>
<Grid container spacing={1}>
{
reports.length?reports.map((element, index) => {
// if (index <= 2) {
return (
<ReportCard
key={index}
element={element}
index={index}
sectionText={sectionText}
/>
);
// }
})
:
<div
style={{
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
marginTop:130
}}
>
<Typography
style={{ fontFamily: "Montserrat", textAlign: "center" }}
>
No Reports to show
</Typography>
</div>
}
</Grid>
</div>
</Paper>
</Grid>
);
};
export default SectionContainer;

CSS padding is not applied to the div in react js

I have a div like this in react js which renders multiple divs and overflows :
<div
style={{
display: "flex",
padding: "1em 0.7em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
But for some reason the padding is applied to the containers right side but not the left side here are some pictures :
How can I apply padding to the array item's container div for both the left and right sides ?

It's because your div width bigger then the body,
and as result your body also have scroll.
Try add boxSizing: border-box to your parent component, and the body scroll will disappear.
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e",
boxSizing: "border-box" // <--- this line
}}
>
...
</div>
);
};

It's the padding on the div. It's to little and the margin too.
import React from "react";
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
);
};
export default App;

My Card's Background and Image are flickering when I move over it (while hovering), it works fine when I just hover over it and stop moving my cursor

import React from 'react';
import { makeStyles, Typography, Grid } from '#material-ui/core';
import Card from '#material-ui/core/Card';
const styles = makeStyles((theme) => ({
card: {
background: 'black',
width: '140px',
margin: '0px 10px',
},
root: {
width: '142px',
height: '196px',
overflow: 'hidden',
position: 'relative',
transition: 'all 0.5s ease-out',
},
image: {
position: 'absolute',
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'all 0.5s ease-out',
zIndex: 10,
'&:hover': {
zIndex: -1,
},
},
textPositioning: {
width: '140px',
height: '40px',
overflow: 'hidden',
marginTop: '10px',
},
text: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Comfortaa',
},
genresContainer: {
backgroundColor: theme.palette.primary.main,
width: '100%',
height: '100%',
position: 'relative',
transition: 'all 0.5s ease-out',
zIndex: 2,
},
genreList: {
width: '100%',
height: '100%',
},
}));
interface AnimeData {
image_url: string;
title: string;
genres: Array<any>;
}
interface DisplayAnimeCardProps {
data: AnimeData;
}
const DisplayAnimeCard: React.FC<DisplayAnimeCardProps> = (
props: DisplayAnimeCardProps
) => {
const classes = styles();
const { data } = props;
console.log(typeof data, data.genres);
return (
<Card className={classes.card}>
<div className={classes.root}>
<img
className={classes.image}
alt='anime'
src={data.image_url}
/>
<div className={classes.genresContainer}>
<Grid
className={classes.genreList}
container
direction='column'
justifyContent='center'
alignItems='center'
>
{data.genres.map((genre) => (
<Typography
className={classes.text}
variant='body1'
>
{genre.name}
</Typography>
))}
</Grid>
</div>
</div>
<div className={classes.textPositioning}>
<Typography className={classes.text} variant='body1'>
{data.title}
</Typography>
</div>
</Card>
);
};
export default DisplayAnimeCard;
The Hovering effect show a div a top the image with some text. It works fine when I simply hover over the Card and do not move the cursor again. But If I move my cursor(during hovering) a top the card, the hover effect breaks and causes flickering between the textPositioningdiv and the image. I want to stop this flickering and just show the textPositioning div whenever I hover over the card and move my cursor

(React) Header and Footer are not at the same width produces a Scroll X - How to remove the axe X scroll and fix the width of the footer?

I have a basic landing page with Header , Content and Footer , however the Header is smaller than the Footer (its width) and as a result the page has a Scroll along the X axe.
Here is the Code
https://9mjhi.csb.app/
App.js
import React from 'react';
import './styles.css';
import Header from './components/Header';
import Footer from './components/Footer';
const App = () => {
return (
<>
<Header />
<Footer>
<span>©</span> Some Footer goes here
</Footer>
</>
);
}
export default App;
Footer :
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
style: {
backgroundColor: "#484848",
color: "white",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100vw"
},
phantom: {
display: "block",
padding: "20px",
height: "60px",
width: "100vw"
}
}));
function Footer({ children }) {
const classes = useStyles();
return (
<div>
<div className={classes.phantom} />
<div className={classes.style}>{children}</div>
</div>
);
}
export default Footer;
Header :
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
container: {
display: "flex",
width: "100vw",
justifyContent: "space-evenly",
alignItems: "flex-start",
backgroundColor: "lightblue"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
root: {
width: "100%"
// maxWidth: 500,
},
col: {
flexDirection: "column",
justifyContent: "center",
textAlign: "center",
color: "#fff",
height: "150px"
},
error: {
color: "red",
fontSize: "12px"
}
}));
const Header = () => {
const classes = useStyles();
return (
<>
<div className={classes.container}>
<div className={classes.col}>.... Something goes here</div>
</div>
</>
);
};
export default Header;
How can we fix the scroll on the X axe and the width of the footer (match it to the header) ?

Try using CSS property overflow!
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
.body {
overflow-x:hidden
}
edit: this css prop must wrap the whole page

makeStyles-style-7 has fixed positioning and left is zero but you have a 8px margin for your body that's why makeStyles-container-2
also has 8px margin left.
makeStyles-phantom-8 is overflowing because of the padding.
check box-sizing
Try this:
.body {
margin: 0px;
}
.makeStyles-phantom-8 {
box-sizing: border-box;
}