It is not mentioned either in the documentation nor in the demos how to set fill mode in animationConfig object,
I've tried
fill: 'both'
timing: {
fill: 'both'
}
Thanks...
Related
As a test, I used a autocomplete (country select) from the official MUI.com autocomplete documentation.
https://mui.com/material-ui/react-autocomplete/
Here is also the code sandbox for the country select:
https://codesandbox.io/s/x1q340?file=/demo.tsx
The country select autocomplete should look like this:
MUI country select from official website
But when I am testing my code in a React/Inertia project of mine, it looks like that (with exactly the same code):
MUI country select in my project
The blue input box should not be there at all. All experiments to remove it somehow failed.
Both the sandbox and the project use the same latest MUI Version. Any idea where the box could come from?
I expected that, when I am using the same code, I should get the same result, but I did not.
So I tried to modify a theme and change the outline of any input content like this:
MuiOutlinedInput: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "gray"
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "black"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
}
}
},
But the result was that the color of the outer border changed from blue to green, but not the inner one.
Try to fix
I want to change the font size of the floating labels of input fields in the React lib MUI v5.
I looked this up a year ago when we were still on version 4, and back then the calculation of the cover area behind the label when "floating" seemed to be hard coded, which made it difficult to change it properly with ease.
Is there a proper solution now in v5 that makes for simple adjustments to the floating labels of input fields? A change to fontSize needs to be reflected in the behavior of the label while floating, by also adjusting the white cover area behind the label.
Unfortunately, while there are ways to change the text size of the label, there is no easy way to also adjust the "notch" size when using variant: outline.
Here's what I would do:
Set the font size for the OutlinedInput's notchedOutline class (This sets the width of the notch):
MuiOutlinedInput: {
styleOverrides: {
notchedOutline: {
fontSize: '2em'
}
}
},
Set the font size for the MuiInputLabel's &.MuiInputLabel-shrink class to match (This sets the shrunken text size):
MuiInputLabel: {
styleOverrides: {
outlined: {
'&.MuiInputLabel-shrink': {
fontSize: '2em',
},
}
}
},
3). (Optional) Also change the transform property on the MuiInputLabel's &.MuiInputLabel-shrink class (this can center the text in the outline line, you'll have to experiment with this and pick a number that works for your font size.):
MuiInputLabel: {
styleOverrides: {
outlined: {
'&.MuiInputLabel-shrink': {
fontSize: '2em',
transform: 'translate(14px, -19px) scale(0.75)'
},
}
}
},
Note: This is all done with style overrides inside your theme.js (docs: https://mui.com/customization/theme-components/#global-style-overrides)
I'm using the select interaction with OpenLayers:
My goal is to simply change the UI display on the map through the feature rather than a layer. Here is what I'm attempting now:
selectClick.getFeatures()
selectClick.getFeatures().item(0)
selectClick.getFeatures().item(0).setStyle(
new Style({
stroke: new Stroke({
color: '#7e0101',
}),
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
}),
);
By logging selectClick.getFeatures().item(0).getStyle() before and after the change I'm able to see that the style for the feature has been modified. However this doesn't result in a visual update. Any suggestions? Do I have to make the change on the layer instead?
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.
Hi, I am trying to remove the background of autocomplete. but did not manage. I managed to changed color but now I can't see the text input.
the image above show the problem . as you can see its override on the label.
input: {
color: '#A5AEB3',
"& .MuiOutlinedInput-notchedOutline": {
color:'#000000',
backgroundColor: muiTheme.palette.background.default
},