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";
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 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 need to use Switch component from MUI v5 in a website with third party CSS that apply relative position to checkboxes and radios.
In v4 I was able to change this behaviour with an override:
overrides: {
MuiSwitch: {
input: { position: 'absolute !important' },
}
}
This was enough to set position to absolute.
Following the example provided by official documentation in order to migrate to v5 I changed the above snippet in:
components:{
MuiSwitch: {
styleOverrides: {
input: {
position: "absolute !important"
}
}
}
}
But MuiSwitch-input still has position relative.
Please take a look at this demo.
The only solution I found was to put style in CSS:
.MuiSwitch-input {
position: absolute !important;
}
I'm not sure why your code didn't work, but I've found a workaround by specifying the switch input className directly like this:
import Switch, { switchClasses } from "#mui/material/Switch";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
[`& .${switchClasses.input}`]: {
position: "absolute"
}
},
switchBase: {
color: "red"
}
}
}
}
});
Live Demo
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
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,
}
}
}
});