I am having trouble styling the Menu component in Material-UI v5.
I have this UI:
<Menu
defaultValue={undefined}
id="simple-menu"
open={openMenu}
onClose={onCloseHandler}
anchorEl={anchorEl}
MenuListProps={{ onMouseLeave: onCloseHandler }}
elevation={0}
sx={{ color: "white", backgroundColor: "blue" }}
>
When I use this code all the UI gets blue:
After that I try to apply global style overrides to the paper of the menu, but nothing happened. The styles did not change:
components: {
MuiMenu: {
styleOverrides: {
paper: {
backgroundColor: arcBlue,
color: arcBlue,
borderRadius: "0px",
},
},
}
}
Please some help here
Passing sx directly on the Menu component applies the styles to the component's root (which is what's causing your style modifications to apply to the overlay blanket).
In your case, since you're attempting to only style the MUI list portion of the menu, you want to pass the sx prop directly to the underlying list component, using the MenuListProps prop. For example:
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
sx: { backgroundColor: "blue" }
}}
>
Which produces:
Working CodeSandbox: https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951
Related
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
I'm trying to style material-ui DataGrid component to justify the content in the cells. I am reading the material ui docs about styling but I don't seem to doing it correct and frankly find the docs on styling very confusing.
The doc here: https://material-ui.com/customization/components/#overriding-styles-with-classes implies I should be able to do something like this:
const StyledDataGrid = withStyles({
cellCenter: {
justifyContent: "center",
},
})(DataGrid);
<div style={{ height: 300, width: '100%' }}>
<StyledDataGrid rows={rows} columns={columns} />
</div>
However, when I do this, I don't see the style being added to the MuiDataGrid-cellCenter DOM element. Attaching a screenshot which shows the element classes. In the inspector I see that the style isn't being added (and if I add it manually I get the desired results). Am I not using the withStyles function correctly?
So after a bit more messing around, I believe the issue is that the DataGrid component does not support the classes property (which it seems most of the material ui components do). I believe the withStyles usage about is shorthand for passing the classes via the classes prop. Since the prop isn't listed in the API https://material-ui.com/api/data-grid/ I'm assuming this is why it isn't working. I confirmed that I can get the styles working by using a combination of the className parameter with descendant selection.
If someone determines I'm wrong and there is a way to get withStyles working on this component please comment.
const useStyles = makeStyles({
root: {
"& .MuiDataGrid-cellCenter": {
justifyContent: "center"
}
}
});
...
export default function X() {
const classes = useStyles();
return (
...
<DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
...
)
}
ALTERNATIVE SOLUTION: (for others with similar issues)
If you are working within a class and cannot use hooks...
<div>
<DataGrid
rows={rows}
columns={columns}
sx={{
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}}
/>
</div>
I'm using Panel from 'office-ui-fabric-react/lib/Panel' in React.
This Panel generates a little [x] button on the upper right hand corner. It is very hard to see, is there any way to change its default background color to red & modify its mouse hover value?
You can easily change the button style through styles property of Panel Component:
styles={{
closeButton: {
backgroundColor: '#f00',
},
}}
If you want to change the hover style of button, you have to use selectors property:
styles={{
closeButton: {
backgroundColor: '#f00',
selectors: {
':hover': {
backgroundColor: '#000'
},
},
},
}}
Panel Component:
<Panel
styles={{
closeButton: {
backgroundColor: '#f00',
selectors: {
':hover': {
backgroundColor: '#000'
},
},
},
}}
/>
Working Codepen example
Useful links:
Definition of Panel Component styles
And this one is the most important Component Styling
Using "#material-ui/core" at version 3.1.0
It's pretty easy to override globally a stepper icon's color globally
createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
color: "#F00"
},
}
}
})
However, it's not clear how you would override the only the color for an icon for either a StepButton or StepLabel using the recommended methods. I see that you can pass in your own icon element, but I don't want to replicate the library logic for the step number and the checkmark.
Is there an clean way to do this?
StepLabel provides a StepIconProps property that allows you pass custom props to the StepIcon component. (docs)
You can use the classes prop to customize StepIcon styles.
<Step key={label}>
<StepLabel
StepIconProps={{
classes: { root: classes.icon }
}}
>
{label}
</StepLabel>
</Step>
Non-linear steppers
You can nest a StepLabel component inside StepButton when you need to pass custom props to StepIcon. (docs)
<Step key={label}>
<StepButton
onClick={this.handleStep(index)}
completed={this.state.completed[index]}
>
<StepLabel
StepIconProps={{ classes: { root: classes.icon } }}
>
{label}
</StepLabel>
</StepButton>
</Step>
I was also facing the same problem, So I Raised the issue in Mui repo, received this reply- we are not using the Mui-active and Mui-completed class in v4, In v5 you should use the Mui-active and Mui-completed classes.
So according to them this will fix the issue for now-
Declare style like this -
stepIconRoot: {
color: "pink",
"&.MuiStepIcon-active": {
color: "red"
},
"&.MuiStepIcon-completed": {
color: "green"
}
}
and put this inside <Step> </Step>
<StepLabel
StepIconProps={{
classes: {root: classes.stepIconRoot}
}}>
{label}
</StepLabel>
https://codesandbox.io/s/material-ui-override-step-icon-color-forked-rcpqw?file=/demo.js:3095-3456
To apply these changes as global you can use the following
createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
color: "#F00",
"&$active": {
color: "#C4E90C"
},
"&$completed": {
color: "#C4E90C"
}
},
}
}
})
As stated in the doc, the color property accepts enums of "default", "inherit", "primary", "secondary". I want an arbitrary color other than "primary" and "secondary". A possible solution is by utilizing the "Overriding with classes" feature where I can specify the root background, and it works.
const styles = {
root: {
backgroundColor: "rgba(44, 152, 240)",
}
};
function FloatingActionButtons(props) {
const { classes } = props;
return (
<Button
variant="fab"
classes={{ root: classes.root }}
>
<Icon style={{ fontSize: 34 }}>play_arrow</Icon>
</Button>
);
}
However, when the mouse hangs over the button, the background restores to the default light grey. This behavior is different when I specify the color property to "primary", in which case the background dims a bit when the mouse hangs over.
How should I specify the customized color correctly?
Use hover selector
const styles = {
root: {
backgroundColor: "rgba(44, 152, 240)",
'&:hover':{
backgroundColor:"rgba(44, 152, 240)",
},
}
};
Have a look at Customized Buttons for more details.