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>

why the circularprogressBar hides when hover on the table mui react

I created a table consisting of a CircularProgressBar, when I hover the tr the CircularProgressBar's background color must change into dark blue from orange,
but I it does not change. Additionally, when the tableRow hoveres the progressBar hides and just the percentage number remain.
just material ui#5 is used
I tried to change the color by this code .MuiTableRow-root ProgressCircular
sample source :
https://stackblitz.com/edit/react-jgj8dh?file=package.json,src%2Findex.js
after hover

<Box sx={{position: 'relative', zIndex: 999, display: 'inline-flex', borderRadius: "100%", ":hover CircularProgress": {backgroundColor: primary.darkBlue} }}>
<CircularProgress thickness={2} variant="determinate" {...props}
sx={{color: "primary.white", borderRadius: "100%", padding: "1px", backgroundColor: primary.darkBlue,
"& .MuiCircularProgress-root:hover CircularProgress ": {
backgroundColor: `${primary.darkBlue} !important`,
zIndex: 999999
},
}} />
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: 2,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: "100%",
padding: "2px"
}}
>
<Typography variant="caption" component="div" color="primary.white">
{`${Math.round(props.value)}%`}
</Typography>
</Box>
</Box>
Does this code help you?

Check if mouse is over a specific react component

I am trying to stop some behaviour based on a condition if a mouse is hovering over a particular react component in my app.
I can only find old answers referencing jQuery and JS vanilla. Is there another way to do this? Or is it not acceptable?
Here is the component I interested in determining if the mouse is over:
<ContentRightHandSide offset={bannerHidden ? 80 : 120}>
<ContentTitle>
Activity
<img
style={{
display: "inline",
position: "relative",
marginLeft: "20px",
width: "35px",
}}
src={calendarIcon}
/>
</ContentTitle>
{authStatus === "authenticated" ? (
<ShareLogs
linkShareLogs={activeShareLogs}
isBannerHidden={bannerHidden}
hovered={hoveredNode}
selected={selectedNode}
/>
) : (
<div style={{ position: "relative" }}>
<img
src={blurredScreenLinks}
style={{
fontSize: "24px",
position: "relative",
margin: "0 auto",
width: "100%",
}}
/>
<button
style={{
backgroundColor: "#F7F1FF",
color: "#35373B",
position: "absolute",
fontFamily: "lato",
left: "0",
right: "0",
marginLeft: "auto",
marginRight: "auto",
width: "320px",
top: "100px",
padding: "0px 20px",
display: "flex",
alignItems: "center",
borderRadius: "60px",
}}
onClick={handleSignInClick}
>
<img
style={{
display: "inline",
position: "relative",
width: "80px",
cursor: "pointer",
margin: "-5px",
}}
src={slackIcon}
/>
<span style={{ textAlign: "left" }}>
Lorem Ipsum
</span>
</button>
</div>
)}
</ContentRightHandSide>

You can define hover events like this in React, similar to how you would handle onClick.
<Component
onMouseEnter={handleSomething}
onMouseLeave={handleSomething}
/>

There are a few ways you can determine if the mouse is currently over a React component, but how to "stop some behavior" depends on how your behavior runs.
If you can make your behavior dependent on some state variable, you can give the React component a handler that sets the state on onmouseenter and onmouseleave events:
const [isMouseOver, setIsMouseOver] = useState(false)
...
<ContentRightHandSide
onMouseEnter={() => setIsMouseOver(true)}
onMouseLeave={() => setIsMouseOver(false)}
offset={bannerHidden ? 80 : 120}
>
...
</ContentRightHandSide>
The handler you give to the component doesn't need to set a state variable either, it can perform whatever logic is needed to change your behavior.
This JSFiddle demonstrates that behavior in a class-based component.
The events you might be interested in: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
There is a section about handling events in the official React docs that might give you more ideas.

How would I make a MUI button take up the entirety of a Grid?

I have a Grid which needs to be a square that is responsive to window size, and inside this grid is a button which should take up the entirety of the grid. Currently, the grid resizes properly, but the contents inside of it do not take up the full size of the Grid. Here is my code
galleryButtonContainer: {
width: '100%',
height: 0,
paddingBottom: '100%',
borderRadius: '20%',
backgroundColor: theme.palette.grey.light,
'&:hover': {
backgroundColor: theme.palette.grey.light,
},
},
image: {
objectFit: 'cover',
width: '100%',
height: '100%',
borderRadius: '20%',
},
thumbnailIcon: {
width: '50%',
height: '50%',
},
<Grid className={classes.galleryButtonContainer}>
<Button
onClick={() =>
toPage(
`/gallery/view/organizationEvent/${data.organizationEventId}`
)
}
>
{hasPhotos ? (
<img
src={thumbnail}
alt="gallery thumbnail"
className={classes.image}
/>
) : (
<PhotoLibraryIcon className={classes.thumbnailIcon} />
)}
</Button>
</Grid>

MUI: Pseudo element being cut-off outside of Paper

I am having trouble with a red arrow '::before' pseudo element being partly cut-off outside of its '.MuiPaper-root' container. I would like for it to still be visible, any suggestions?
Below I have provided the relevant code and screenshots:
const useStyles = makeStyles(theme => ({
root: {
left: '5rem !important',
'& .MuiPaper-root': {
'&::before': {
position: 'absolute',
left: '4rem',
display: 'inline-block',
top: '-3.9rem',
fontSize: '5rem',
fontFamily: 'Material Icons',
content: '"arrow_drop_up"',
color: 'red',
zIndex: '5 !important',
},
},
},
}));
<S.Item style={{ alignSelf: 'stretch' }}>
<S.ItemGrid>
<S.Title>Guest rating</S.Title>
<S.Rating>
<FormControl style={{ width: '10rem' }}>
<S.StyledSelect
defaultValue={3.5}
value={rating.currency}
onChange={changeRating('currency')}
renderValue={option => option.value}
MenuProps={{
classes: { root: classes.root },
}}
>
{ratings.map(option => (
<S.StyledMenuItem key={option.value} value={option}>
<div>{option.value}</div>
<div>{option.label}</div>
</S.StyledMenuItem>
))}
</S.StyledSelect>
</FormControl>
</S.Rating>
</S.ItemGrid>
</S.Item>

Add overflow: 'visible' in your Paper style to prevent the content from being clipped even if it's outside the parent:
overflow: "visible",
"&::before": {
// ...
}