I need to apply some margin and change the style of the material-ui-pickers. There is no style section in the documentation.
Here is the link for the datePicker https://material-ui-pickers.dev/getting-started/usage
By inspecting the element I found the class and I need to apply style for that class
I tried the following code but the styles are not applied because rule name root is not valid here
const StyledPicker = withStyles({
root: {
'& .MuiPickersCalendarHeader-iconButton': {
backgroundColor: '#f2f2f2',
borderRadius: 0,
width: 32,
height: 32,
margin: '10 30',
},
},
})(DatePicker);
You can try this inside a makeStyles and useStyles inside your component and use it as className:
'& .$MuiPickersCalendarHeader-iconButton': {
I share room a exeptionnal link about material-ui styles.
Related
i am using fluent ui which uses Griffel for styling. When i try to provide border: "none" it's throwing error that string not assignable to undefined
import {makeStyles} from "#fluentui/react-components";
export const settingsButtonStyle = makeStyles({
root: {
border: "none",
background: "#E5E5E5",
marginRight: "13px"
},
rootHovered: {
background: "#E5E5E5",
}
});
GriffelJS tries to make Atomic CSS classes, so they don't support CSS shorthands (like border or background) right away. But there is a helper function called shorthands to manage some of theses. Background is not included in the helper function, so there you should use the specific CSS proprety. So your code should look like this:
const useStyles = makeStyles({
root: {
...shorthands.border("0"),
// or
...shorthands.borderStyle("none"),
backgroundColor: "#E5E5E5",
marginRight: "13px"
},
})
You find more infos to shorthands in GriffelJS in their documentation shorthands - GriffelJS
The code below is from MUI 5, with a MUI 4 solution for change input field when hovering. But it obviously doesn't work, wonder how to achieve this in MUI 5, can't
seem to change the color from the TextField upon hovering. This is done using createTheme in MUI 5
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: arcBlue,
fontSize: '1rem',
},
},
},
MuiInput: {
styleOverrides: {
underline: {
'&:before': {
borderBottom: `2px solid ${arcBlue}`,
},
// Code from material ui 4
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${arcGrey}`,
},
},
},
},
},
The $ syntax is a feature from JSS, in MUI v5, they switch to emotion so it doesn't work anymore, you have 2 options now:
Use plain string
From this section, you can see a list of class names that describe different MUI component states:
State
Global class name
active
.Mui-active
checked
.Mui-checked
completed
.Mui-completed
disabled
.Mui-disabled
error
.Mui-error
expanded
.Mui-expanded
focus visible
.Mui-focusVisible
focused
.Mui-focused
required
.Mui-required
selected
.Mui-selected
'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
borderBottom: `5px solid purple`
}
Use constant
Most MUI components have their own class constants if you don't want to hardcode the class name:
import { [component]Classes } from "#mui/material/[Component]";
import { inputClasses } from "#mui/material/Input";
[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
borderBottom: `5px solid purple`
}
Reference
https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion
I have styles like this:
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
// here I want to target the 'container' className I created above like
'& .container': {
backgroundColor: 'green'
}
}
});
I want to target the container className I created inside of the active className. The above won't work because in the DOM, MUI will generate a unique name so I won't be targeting the right class. Wasn't able to find any SO answer or blog or documentation addressing this.
$ rulename is used for this purpose. Here is the documentation of it on Material-UI.
CSS in JS documentation also explains this feature.
container: {
//other styles
},
active: {
"& $container": {
background: "green",
color: "#fff"
}
}
Here one thing which is important that for referencing 'containerrule, it should be defined in the rules object. trying to use"& $containerwithout defining thecontainerrule inside themakeStyles` will not work.
Here is the working demo:
You can refer using $
You will have to modify your DOM little bit such that the active className is not the parent of container. Instead add the active className to the conatiner element itself.
so your css style might look like below
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red',
'&$active': {
backgroundColor: 'green'
}
},
});
I think this is what you are looking for $rulename
How to Use $ruleName to reference a local rule within the same style sheet
In your case i think the solution would be
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
.container: {
backgroundColor: 'green'
}
}
});
Which should compile to
.root.container.active{}
and on the target tag taking a example of button here
<Button
classes={{
root: classes.root,
container: classes.container,
active: classes.active,
}}>
Havent worked with MUI yet but even in vue or react the way this is achived is by setting a dynamic name on the tag that is targeted via script.
I got a material-ui AppBar component that is position="fixed" so it sticks to the upper border of the window as a main manu bar. Components name here is "header" Its getting styled with this JSS obj.
Since the main container slips under the AppBar Component to top 0, when its position is fixed i need to margin-top it down right under the AppBar in order to have them positioned consecutively.
Preferably, I would like to set the margin-top to have the actual value of the AppBar height so I dont need to set it manualy. (also the AppBar height adjusts to its content, so it may be of variable size)
However I dont know how to do this, so I have to set the height/margin-top(main_container) manually.
At least: How do I make the main_horizontal_container.marginTop get its value form the header.height, so I only have to set it once?
Unfort, that does not work as planned - "TypeError: Cannot read property 'height' of undefined"
const styles = theme => ({
main_horizontal_container:{
display: "flex",
get marginTop () {return this.header.height}
},
header:{
height: 64,
},
sidebar:{
//flexBasis: content,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
minWidth: 0, // So the Typography noWrap works
},
toolbar: theme.mixins.toolbar,
});
It seems that this in this.header.height refers to main_horizontal_container which doesn't have header. Instead, you could extract header to a variable:
const styles = theme => {
const header = {
height: 64,
};
return ({
main_horizontal_container:{
display: "flex",
get marginTop () {return header.height}
},
header,
sidebar:{
//flexBasis: content,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
minWidth: 0, // So the Typography noWrap works
},
toolbar: theme.mixins.toolbar,
});
}
in material-ui v0, when creating a theme with const muiThemeV0 = getMuiTheme(theme);
i can simply add a property to the themeOptions for each component based on this file:
https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js (currently on the master branch when writing this question), and can customize not only colors but the theme border-radius etc, and specific components sizes and colors.
for example:
const theme = {
slider: {
selectionColor: colors.primary1Color,
handleFillColor: colors.primary1Color,
trackSize: 6,
}
}
I tried going through the https://material-ui-next.com/customization/overrides/ docs, but can't see examples and/or a list of options in the source code like MUI-v0 when i want to use const muiThemeV1 = createMuiTheme(theme);
are there any docs for this kind of customization in v1?
is this even possible?
In v1, you can use the theme overrides property to customize the styles of a specific component type. Instead of providing theme options for individual components, this feature allows you to customize every style that material-ui injects into the DOM.
You can find a list of the CSS classes for each component on the website (in component API section).
The following example customizes the appearance of the Button component
const theme = createMuiTheme({
overrides: {
MuiButton: {
// override root styles for the button component.
root: {
// Name of the rule
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
color: 'white',
height: 48,
padding: '0 30px',
marginRight: 32,
},
// Custom styles for the raised button variant
raised: {
borderRadius: 50,
color: 'white',
// Custom hover styles for raised button
'&:hover': {
boxShadow: shadows[4],
},
// Custom active styles for raised button
'&:active': {
boxShadow: `${shadows[24]} !important`,
},
},
},
}
});
Live example on code sandbox
Documentation on theme overrides