Is there a working equivalent for current element selector in React JSS styling syntax?
'&element': { margin: 0 }
Use case
I have this style for all <Button> components in my application.
'&:first-of-type': { marginLeft: 0 },
'&:last-of-type': { marginRight: 0 }
So if they appear in a row, the first one and the last one have appropriate margins.
However, sometimes I use
<Button component={Link} ../>
Which turns Button component into a element instead of button. This can mess up :first-of-type / :last-of-type selectors and cancel out margins for a element in between of the buttons.
My original intention was to set something like this, but this doesn't work.
'&button:first-of-type': { marginLeft: 0 },
'&button:last-of-type': { marginRight: 0 }
So far, I'm using the alternative
'&:first-of-type:not(a)': { marginLeft: 0 },
'&:last-of-type:not(a)': { marginRight: 0 }
Button element shouldn't be responsible for the margin, because it breaks encapsulation, your component shouldn't take care of outer space, its parent should be.
Related
I want to disable Material-UI blur effect when a user opens a dropdown(select menu). maybe it's a nice effect for only one input, but imagine a form with 20 dropdowns and every time user clicks one of them the entire screen blur and becomes noisy and unhandy.
you can ovverride mui styles with MUI createTheme.
For my react application when I deleted this styles ovverride, the blur effect disappeared
image
you can just replace the blur with none
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: 'transparent',
backdropFilter: 'none',
'&.MuiBackdrop-invisible': {
backgroundColor: 'transparent',
backdropFilter: 'none'
}
}
}
},
you can read more here: https://mui.com/material-ui/customization/theming/
I have this spring defining a looped animation:
const style = useSpring({
from: { marginBottom: 0 },
to: [
{ marginBottom: 0 },
{ marginBottom: 80, config: { duration: 600 }, delay: 3000 },
{ marginBottom: -80, config: { duration: 0 } },
{ marginBottom: 0, config: { duration: 600, delay: 1000 } },
],
loop: true,
})
My problem is that whenever I re-render the component containing the spring, the animation 'resets' and starts moving towards the first to position (in this case { martinBottom: 0 })
It can be seen in this sandbox - click the 'reset' button just as the arrow is traveling up and it will reverse course instantly
The documentation also hints that stabilizing the references of from and to may solve the issue... and it kind of does, but it introduces a new one: if the components re-renders shortly before the animation starts, it skips the 'travel up' portion: sandbox here.
The bigger problem is that the more times I 'interrupt' the animation cycle by re-rendering, the more it affects some of my other, more demanding animations, making them more and more staggered.
Refreshing whole app instantly resets this decay and makes all animations fluid again. When I remove this useSpring from my code, this decay disappears
So what is going on there? Is there something I'm missing?
From this docs example, It makes sense to me that the animation resets on re-render ... but then why does this example instruct me to compose staged animations this way, am I missing some key step?
And what's up with this slow 'decay' of other animations' performance, is that a known cause to that?
I am evaluating React-Material grid for my customer. One of the key feedback was the absence of alternate shading of rows, which impacts user experience.
https://material-ui.com/components/data-grid/#mit-version
Is this possible?
Actual
Desired
thank you,
Sau
MUI5 DataGrid Striping
For MUI5, as pointed out by keemor in the comments, you can use indexRelativeToCurrentPage parameter of the getRowClassName prop argument. For compatibility with the original undocumented Mui-even/Mui-odd class names, you can return those class names via this prop as below:
<DataGrid
loading={loading}
{...data}
getRowClassName={(params) =>
params.indexRelativeToCurrentPage % 2 === 0 ? 'Mui-even' : 'Mui-odd'
}
/>
The indexRelativeToCurrentPage value does reset between pages, so the first item in page one will be even along with the first item in page 2, no matter how many items there are per page.
The :nth-child selectors mentioned in the MUI4 section is only a viable solution if you turn off data virtualization which is active by default. If you tried to use it with virtualization, then you'll end up with a strobe effect as you scroll due to the removal of elements outside the viewport.
MUI4 DataGrid Striping
It's pretty simple to add in via a CSS selector.
If you add a selector for the odd rows .Mui-odd, then you can set the color of the background and make it striped. You could use .Mui-even instead for the other half.
.MuiDataGrid-row.Mui-odd {
background-color: aliceblue;
}
Here's a working codesandbox
If you wanted to use :nth-child, then you'd need :nth-child(even) for the same set of rows as .Mui-odd, though .Mui-odd keeps up it's ordering between pages, where the psuedo selector doesn't.
.MuiDataGrid-row:nth-child(even){
background-color: aliceblue;
}
Using this solution you can make it dynamic with light/dark modes and also preserve mouse hover effects.
const useStyles = makeStyles((theme) =>
({
root: {
'& .MuiDataGrid-row.Mui-even:not(:hover)': {
backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.04)',
},
},
}),
);
This worked for me in MUI v5 - TypeScript.
const useStyles = makeStyles((theme: Theme) =>
({
root: {
'& .MuiDataGrid-row:nth-child(odd)': {
backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary[300] : theme.palette.secondary[900]
},
},
}),
);
See the official StripedDataGrid component example.
I have a row of pivot buttons which I use for my spfx form in a web part. I need to be able to give a grey background when users hover over the control. so at the moment my control looks like this :
So the blue bar changes on select but I want a grey hover over so the users know where to click.
Thanks in advance.
I have written this code to get the style but I cannot add the style into the component:
const styler = {
root: [
{
selectors: {
':hover': {
background: '#2C3539'
}
}
}
]
};
In this codepen you can see how you can pass styles to the correct style areas for Pivot control.
link: [
!rootIsTabs && {
selectors: {
':hover': {
backgroundColor: palette.neutralLighter,
color: palette.neutralDark
},
':active': {
backgroundColor: palette.neutralLight
}
}
}
],
To mention also, is that the styles I demo will be default styles in the next major release (Fabric v7), so you can have this in your code until we have an official release (within a few weeks) and when you have the ability to upgrade you can remove it and have it backed in into the component.
P.S.: the animation is another bonus that comes with this new major release.
I'm trying to create a class specificity in Material UI Next same way as they allow you to use pseudo classes, but for nested elements. For example, in Material UI Next (MUI-Next) I can create a class with styles in it:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
},
};
and use it this way
<Toolbar className={classes.appbar}>
... blah blah blah
</Toolbar>
That paints my Toolbar element in color #6d6146 and hovers to #9e8e6a.
Now, if imagine I have some elements inside the Toolbar and I don't want to create a class for every single element in it. (especially if they are not MUI-Next elements, but some custom HTML) For the sake of an example, a hyperlink. Like this:
<Toolbar className={classes.appbar}>
<a href="www.google.com">
<span>Title</span>
</a>
</Toolbar>
Yes, there are ways to do this particular example correctly using MUI control properties, remember this is an example. Real world code is very complex and lots of code.
I would like to access that hyperlink by way of specificity using the main parent class as a hook class. The desired rendered css would look like this:
.appbar {
background: #6d6146;
}
.appbar:hover {
background: #9e8e6a;
}
.appbar a{
color: #d63302;
}
My attempt to create specificity is not working. This is what I tried:
const styles = {
appbar: {
background: '#6d6146',
'&:hover': {
background: '#9e8e6a',
},
'a': {
color: '#d63302',
},
},
};
According to how MUI-Next handles pseudo-classes to create specificity, this element specificity should work, but doesn't. Can this be done and I am not using the right syntax, or is this not supported?
Remember this is Material UI Next found here. Completely different than the older Material UI.
Here is a playground for ya. Thanks in advance.
SAMPLE CODE
Try this :
appbar: {
background: "#6d6146",
"&:hover": {
background: "#9e8e6a"
},
"& a": {
color: "black",
"&:hover": {
color: "red"
}
}
}
Working link