I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applying the same animation for the drawer to the parent div and this did not solve my problem. I've replicated the issue in CodeSandbox. See below.
Example
Our specific use case is fairly complicated, but I think we've managed to find a fix. Essentially, we had to apply a transition to the <main> element and set its margin based on the state of the right toolbar. See below.
main: {
position: 'relative',
flex: 1,
height: '100%',
overflow: 'hidden',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: -500,
},
mainRightOpen: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
}
and implemented like so...
<main
className={`${classes.main}
${this.props.rightToolBarOpen ? classes.mainRightOpen : null}
`}
ref={(mainContent) => { this.mainContent = mainContent; }}
>
Also, if you don't want the fixed margin value, you may consider to use percentage for the margin control, for instance:
// define the drawerWidth
const drawerWidth = 33.33333;
// put margin value as a string format like below:
content: {
flexGrow: 1,
padding: theme.spacing(6),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginRight: `${-drawerWidth}%`,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginRight: 0,
},
Above solution works form me (Material-UI version I am using: v4.12.1)
Related
I'm trying to create an animation of a spinning svg as a loader,
checking online I've seen some examples of doing it with Styled component, which is deprecated.
Been wondering if you guys have a suggestion?
I tried adding an '#keyframes spin' property to my SX but it didn't do anything, I.E:
<Box
sx={{
animation: '$test 1s linear infinite',
'#keyframes spin': {
from: {
transform: 'rotate(0dg)'
},
to: {
transform: 'rotate(360dg)'
}
}
}}
>
I tried creating an animation with SX property of MUI v5 with the same logic as Styled component
but failed :(
I wonder if we can achieve it without using a CSS file & a class...
With MUI5 it's works just fine when add keyframes on SX props
Here is my example
<Box sx={{
"#keyframes width-increase": {
"0%": {
width: "100px"
},
"100%": {
width: "300px"
}
},
width: "100px",
height: "50px",
backgroundColor: "red",
animation: "width-increase 1s ease infinite",
}}></Box>
Make sure you init keyframes before use.
Hope this will help you...
I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
I am currently fiddeling with this transformation snippet, and I want to change the background of the boxes to images, instead of a gradient. However, it does not seem to work.
<div
className="element"
style={{
width: element.width,
height: element.height,
backgroundImage: this.state.backgroundImage,
...styles,
}}
>
import BackgroundImage from './door1.png';
...
...
constructor(props) {
super(props);
this.state = {
elements: [
{
id: "el-3",
x: 100,
y: 225,
scaleX: 1,
scaleY: 1,
width: 100,
height: 100,
angle: 0,
backgroundImage: {BackgroundImage},
classPrefix: "tr2",
text: "Scale Disabled",
styles: {
padding: 5,
},
disableScale: false,
},
],
offsetX: 40,
offsetY: 20,
zoom: 1,
};
this.workspaceRef = React.createRef();
}
Any ideas?
I also tried to do something like this:
Setting Background-Image in React ,
Syled Components Background Image React ,
Setting background image as prop in react
But it didn't seem to work
I also tried to put it inside the div, like this:
<div
className="element"
style={{
width: element.width,
height: element.height,
backgroundImage: this.state.backgroundImage,
...styles,
}}
>
<img src={element.backgroundImage.BackgroundImage} />
{element.text}
</div>
but then it ended up looking like this:
Door
Just a tiny little modification
change your json objects like
...
backgroundImage: BackgroundImage, //without curly braces
....
and in the div
style={{
....
backgroundImage: `url("${element.backgroundImage}")`,
...styles
}}
check it here
I've started out with Material-ui-next and have some problems with displaying images that they use the entire size of a container.
E.g. I use:
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550
}
});
In render:
<Card className={classes.Card}>
<CardMedia
className={classes.Media}
image={ImgPomodoR}
title="a pomodoro tomatoe timer in material design"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
...
The documentation says I have to specify a height for the image to get displayed. The 'media' example gives the image a height of 0, however, if I apply that my image is not getting displayed - mentioned example.
Right now, for me it's a trial and error of the Media-height, that it fits the Card container without being cropped.
Is there no 'auto' way of doing this?
Any help is highly appreciated,
cheers mates,
Tobias
Edit: I should mention that height: "100%" // maxHeight: "100%" does also not work for me.
I was having the same issue. Setting both width and height to '100%' worked for me.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: '100%',
width: '100%'
}
});
However, if your images have different heights, this will cause cards to be different heights and most of the time that is not what you want. For that, you can specify a height and keep the width at '100%'.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550,
width: '100%'
}
});
This will stretch the images to fit the container. For my case, I wanted part of the image to be shown without stretching the images. To achieve this, simply set the objectFit property to cover. This worked nicely for me.
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550,
width: '100%',
objectFit: 'cover'
}
});
Hope this helps someone,
I think it would work
const styles = theme => ({
card:{
backgroundColor: 'white',
marginBottom: 40,
},
media: {
height: 0,
// paddingTop: '56.25%', // 16:9,
paddingTop: '100%', // 1:1,
},
});