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)
Related
I want to change the color of the label circled here:
How would I go about doing so?
I have tried changing the color of the primary colors on the palette. Also, there does not seem to be a way to do it through CSS without affecting other components.
Here's my current code for the theme:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
day: {
color: "#436E70",
},
daySelected: {
backgroundColor: "#436E70",
},
dayDisabled: {
color: "#436E70",
},
current: {
color: "#436E70",
},
},
},
});
Material-UI pickers v3.3.10
https://material-ui-pickers.dev/guides/css-overrides
Variant: static
Npm package used: #material-ui/pickers
Someone suggested this post: Change header color of Material-UI Date Picker
That solution is 5+ years old already,getMuiTheme is not part of v3.3.10. Also the way described in that post does not work anymore, it does not matter where in the createMuiTheme object I put
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color,
},
It does not work, it doesn't have any effects. And the documentation also doesn't bring much light to the case.
Thanks in advance.
According to the documentation from your link the datepicker has a rule (sometimes called slot) called MuiPickersCalendarHeader. This rule is used to provide styling to a <div> tag that is an ancestor to the <p> tag that contains the text you've circled in your sample image (i.e. "July 2022"). You can see how these tags are structured in the Inspector tab of the Developer Tools Window in Firefox (in the browser highlight the text "July 2022", right-click the highlighted text, then from the context menu choose Inspect). Knowing the tag structure, we can apply a CSS selector to target the <p> tag like so:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
...
// MuiPickersCalendarHeader rule
MuiPickersCalendarHeader: {
switchHeader: {
['& > div > p']: {
// backgroundColor: lightBlue.A200,
// color: "white",
},
},
},
...
}
}
The above code is untested. If you have problems with it say so in a comment, and I'll try to test it.
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.
So, here is what I currently have:
And I need distance between icons to be equal. That's what I'm unable to do using tabStyle prop like this:
tabStyle: {
width: whatever
}
cause distance is not equal. How can I do so in React Navigation 5?
I assume you want the labels to be as wide as the content instead of stretching to available width. In that case, you need to set width to auto:
tabStyle: {
width: 'auto'
}
I'm using a StripeElements CardElement in React, passing in base styles as an object per the docs. When I use fontSize using pt/rem, the height of the input jumps to 150px during the "MM/YY CVC" animating in, before settling to its actual size. When I use em/px, the height either doesn't jump at all or too quickly to notice.
What could be causing this? Why does the behavior seem to change depending on the font size unit I use?
const CardElementStyle = {
base: {
fontSize: `1em`, // values in pt and rem cause jump, while em and px don't cause jump
fontFamily: `"Whitney A", "Whitney B", Helvetica, sans-serif`,
fontStyle: "normal"
},
invalid: {
color: PALETTE.nonInteractiveBackground
}
};
<StripeElements.CardElement
className="cardInput"
style={CardElementStyle}
/>
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.