By default z-index is set to 1300
doing something like:
[class*='MuiModal-root'] {
z-index: 2000!important;
}
works but is there a better way?
Create a Theme if you don't have one Material-UI themes docs and override the z-index like so:
export const theme = createMuiTheme({
overrides: {
MuiModal:{
root: {
zIndex: 2000,
}
}
}
});
Related
I'm creating a style to use within a Button, but I'm unsure on how to select a nested style from my theme. Here is my style and theme:
const buttonStyle: SxProps<Theme> = {
'&:hover': {
backgroundColor: 'backgroundAlert', // workaround
},
};
export const darkTheme = createTheme(themeOptions, {
palette: {
mode: 'dark',
background: {
default: '#0B0E16',
paper: '#1D1F2B',
alert: '#373B38' // I want to use this property
},
backgroundAlert: '#373B38', // workaround
},
});
I'm using backgroundAlert as a work around because i don't know how to select alert from background.alert since it's nested. I couldnt find anything in the docs - does anyone know the syntax to do this?
Something like the below worked for me.
import { styled } from '#mui/material/styles';
const ButtonStyle = styled(Button)(({ theme }) => ({
'&:hover': {
backgroundColor: darkTheme.palette.background.alert,
},
}));
<ButtonStyle variant="contained">Your Button</ButtonStyle>
I'm not sure if this is possible or not, after looking at Material UI's documentation on How to Customize, but I'm trying to isolate styleOverrides for a given component using styled() rather than applying a lot of overrides within a global theme file.
Currently, my theme file looks something like this, with some typography and palette overriding Material UI's default theme:
const theme = createTheme({
palette: { ...
},
typography: { ...
}
});
When I use a Chip component (rendered in Storybook currently) and pass in success, primary, secondary, etc. into the color prop, the corresponding theme colors are applied. However, when I try to override the theme files, using styled(), the colors defined in the theme are still being applied - as opposed to my overrides defined. My component file looks like the following:
import { styled } from '#mui/material/styles';
import MuiChip, { ChipProps } from '#mui/material/Chip';
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
colorPrimary: {
backgroundColor: theme.palette.primary.light
},
colorSecondary: {
backgroundColor: theme.palette.secondary.light
}
}));
export default Chip;
You can create your own custom variant and define your own styles to it
const theme = createTheme ({
components : {
MuiButton : {
variants : [
{ props : { variant : 'YouVarName'},
style: { //..your styles } ,
},},
I am fairly new to MaterialUI and I'm using V5. I have seen the code samples for this on v4 but not sure how to do the same on mui5. I have a data grid and I want to change the background color + font colour when selected. How do I do this?
My current table:
Update: Got a sandbox code demo to my query. This should be good
https://codesandbox.io/s/condescending-dijkstra-zc2rhs?file=/src/Demo.tsx
Edit: Attaching the code below
const myTheme = createTheme({
components: {
//#ts-ignore - this isn't in the TS because DataGird is not exported from `#mui/material`
MuiDataGrid: {
styleOverrides: {
row: {
"&.Mui-selected": {
backgroundColor: "rebeccapurple",
color: "yellow",
"&:hover": {
backgroundColor: "purple"
}
}
}
}
}
}
});
#Rick45888, now you can use the following for typescript support in pro components-
import type {} from "#mui/x-data-grid-pro/themeAugmentation";
I have an application that utilizes box's in place of where divs would typically be placed to stay within the MUI ecosystem. My question is, is it possible to have a global theme override for all box components much like how you can globally override the background color for all cards using theme provider.
You can override the Card styles globally using createTheme() because the Card has a name and a styleOverrides callback when it is styled using the styled() API. However, the Box does not, as you can see from the definition here.
const theme = createTheme({
components: {
// this works
MuiCard: {
styleOverrides: {
//
}
},
// this does not work
MuiBox: {
styleOverrides: {
//
}
}
}
});
If you want to create a base component like the Box that can be styled globally by createTheme, you need to define the following properties in the options when calling styled()
name: so the styled engine can identify your component.
overridesResolver: to let MUI know how to resolve the final styles (by combining with other styles created by custom variant, prop and state of the component).
Below is the minimal example for demonstration:
const theme = createTheme({
components: {
MuiDiv: {
styleOverrides: {
root: {
backgroundColor: "green"
}
}
}
}
});
const Div = styled("div", {
name: "MuiDiv",
overridesResolver: (props, styles) => {
return [styles.root];
}
})();
<Div sx={{ width: 10, height: 10 }} />
Live Demo
References
https://mui.com/system/styled/#api
https://mui.com/system/styled/#custom-components
I'm creating a theme for an app with createMuiTheme. I'm using material-table and I need to target to this icon of the column table header that is currently sorted:
Watching in developer tools it has the following CSS selectors:
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
How can i do that in the createMuiTheme object from this?
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
When you are uncertain how to override the default styles, the best resource is to look at how the default styles are defined. The browser developer tools will show you the end result, and the source code will show you the approach to use to generate CSS with similar specificity.
Below is the relevant code from TableSortLabel that controls the icon color:
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
You can use very similar syntax for the theme override:
const theme = createMuiTheme({
overrides: {
MuiTableSortLabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});
Relevant JSS Documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet