Currently, the existing codebase has some overrides in the createTheme i.e. :
return createTheme({
...
overrides: {
MuiChip: {
deletable: {
"&:focus": {
backgroundColor: grey[200],
"& $deleteIcon": {
color: primary.dark,
transition: transitions.create(["color"]),
},
"& $deleteIcon:hover": {
color: darken(primary.dark, 0.2),
transition: transitions.create(["color"]),
},
},
}
}
}
})
The transition library was moved away from import transitions from "#material-ui/core/styles/transitions";. I can't find the new import that properly matches or the documentation. There is documentation that speaks to using theme.transition.create but i'm not clear how that's meant to be used inside of the createTheme method. Is there documentation or a new way to access that method within the the createTheme?
Related
I would like to modify MUI Chip color and background color "globally" but using different colors than the ones defined in the same theme for severity.
This is what actually looks like (only by using theme defined severity colors):
This is how I want it to look:
It's actually possible to achieve that by using createTheme module or I need to take a different approach?
This is my attempt:
export const defaultTheme = createTheme(
{
palette: {
// Palette definitions
},
components: {
MuiChip: {
styleOverrides: {
root: {
severity: {
success: {
color: colors.success.main,
backgroundColor: colors.success.light,
},
// And so on with the remaining severity levels
},
},
},
},
},
},
);
If you want to modify the background color in the theme, you can add a name to the theme, I provide you with an example and let you try.
export const yourTheme = createTheme({
palette: {
successChip: {
contrastText: '#5ccc09',
main: '#eaf9e0',
},
rejectChip: {
contrastText: '#ff595d',
main: '#ffe9ea',
}
}
});
<Chip label="Professional" color="successChip"/>
<Chip label="Rejected" color="rejectChip"/>
And then you will get what you want it to look like.
Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.
components: { ...
MuiAppBar: {
styleOverrides: {
root: {
minHeight: '4.375rem',
backgroundColor: appColors.aqua600,
},
},
}, ...
This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'
The component usage:
<AppBar
component="header | footer" ...
</AppBar>
I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?
It can be done by overriding styles based on props using ownerState.
Overrides based on props
You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.
The ownerState prop is a combination of public props that you pass to the component + internal state of the component.
You can check more on docs.
So, the custom theme for MuiAppBar should be something like this:
components: {
MuiAppBar: {
styleOverrides: {
root: ({ ownerState }) => {
return {
...(ownerState.component === "header" && {
backgroundColor: "#202020"
})
};
}
}
}
}
I am using https://github.com/jungsoft/materialui-daterange-picker which uses Material UI. It uses makeStyles to override the styles. I am trying to apply my own styles to things like button disabled, filled, outline, etc. How do you override a makeStyles override?
I tried directly overriding classes like this, but no success.
export const useDateRangePickerStyles = makeStyles({
'& button:disabled .materialui-daterange-picker-MuiTypography-colorTextSecondary': {
color: 'rgba(0, 0, 0, 0.26)'
},
'& .materialui-daterange-picker-makeStyles-filled': {
backgroundColor: '#03DAC5'
},
'& .materialui-daterange-picker-makeStyles-highlighted': {
backgroundColor: 'rgba(3, 218, 197, 0.08)'
},
'& .materialui-daterange-picker-makeStyles-outlined': {
borderColor: '#03DAC5'
},
'& .MuiPaper-elevation': {
boxShadow: 'none',
transition: 'none'
}
})
I even tried creating a new makeStyles with a hierarchy of MaterialUI class overrides. No success.
Looks like this issue came up multiple times with the plugin and the "Issues" section of the github package contains some css hacks that helped.
inb4: I am totally new to material-ui.
Hi all,
I guess I have a bit of a weird question. I have a react application based on bootstrap and want to slowly migrate to material-ui.
Best case I can adapt the styling currently present for bootstrap in material-ui.
I started with adjusting the colors in the palette (createMuiTheme) and using this theme in every new component.
However, I can not figure out how to, for example, change the bg-color of a list item depending if it is odd or even numbered.
Also, can I change border-colors based on the theme? Do I need to use overrides for this? If so, is there a best-practice approach?
Apologies if this is documented somewhere.
Olli
edit:
my current theme looks like this:
const theme = createMuiTheme({
palette: {
primary: {
main: '#009afe' // primary color
},
secondary: {
main: '#1a4361' // secondary color
},
error: {
main: '#c72525' // error color
},
warning: {
main: '#f89406' // warning color
},
info: {
main: '#009afe' // primary color
},
success: {
main: '#3a8e3a' // success color
},
background: {
default: '#272b30', // third background color
paper: '#1c1e22', // third background color
secondary: '#272b30'
},
text: {
primary: '#c8c8c8', // primary text color
secondary: '#ffffff'
}
},
typography: {
fontSize: 20
},
overrides: {
MuiCssBaseline: {
'#global': {
html: {
WebkitFontSmoothing: 'auto'
}
}
}
}
I extended background to hold more values than one, but I honestly don't know if it's against the rules of material-design.
Figured it out (I guess). My question was not.... smart:
How I "solved" it:
const theme = createMuiTheme({
palette: [...]
typography: [...]
overrides: {
MuiListItem: {
root: {
backgroundColor: '#272b30' // primary bg color
},
button: {
'&:nth-child(odd)': {
backgroundColor: '#1c1e22' // third bg color
},
'&:nth-child(even)': {
backgroundColor: '#202429' // fourth bg color
},
'&:hover': {
backgroundColor: '#3e444c !important' // fifth bg color
}
}
}
}
});
I'm trying to implement a MaterialUI theme throughout my app. So far I have this and everything but the transition property is working correctly. Chrome DevTools show the property active but there is no background transition on hover. Clearly I'm not looking in the right places as I can't find this topic discussed anywhere.
import { createMuiTheme } from '#material-ui/core/styles';
import blueGrey from '#material-ui/core/colors/blueGrey';
const primaryStop0 = blueGrey[500]
const primaryStop1 = blueGrey[900]
export const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontWeight: 'bold',
margin: '50px'
},
containedPrimary: {
background: `linear-gradient(to right,${primaryStop0},${primaryStop1})`,
transition: 'background 0.2s ease',
'&:hover': {
background: `linear-gradient(to left,${primaryStop0},${primaryStop1})`
}
}
}
}
})
As it turns out this is a CSS limitation not MaterialUI. No support for linear-gradient transitions.
Use CSS3 transitions with gradient backgrounds