In my component I need to override css parameter "overflow-y". This parameter is described in class .MuiDrawer-paper.
Usually to override css is piece of cake via makeStyles. But in this component has two divs. Parent container and daughter div. And when I set overrided class like:
const useStyles = makeStyles((theme) => ({
paper: {
overflowY: 'unset',
},
)};
...
className={classes.paper}
Parent div gets this class and it does not have any sense. Because I need to override daughter class.
I tried to do some thing like this:
className={{ paper: classes.paper }}
But in this case class wan't picked... What should I do?
The correct way to override material ui classes is to make use of classes prop on Drawer component instead of className.
Read more about overriding classes
const useStyles = makeStyles((theme) => ({
paper: {
overflowY: 'unset',
},
)};
...
<Drawer
classes={{
paper: classes.paper,
}}
anchor="left"
open={open}
/>
The top-voted answer in this thread contains legacy code (makeStyles). I was able to override CSS on a child element of a MUI component via the styled API (migration guide):
const StyledMUIComponent = styled(MUIComponentName)({
"& .child-class-to-target": {
overflowY: 'unset'
}
})
I have 2 options.
using !important
const useStyles = makeStyles((theme) => ({
paper: {
overflowY: 'unset !important',
},
)};
using styles property.
<Drawer style={{overflowY: 'unset'}} />
I prefer to use styles property.
Related
I am trying to make the custom hovered style of IconButton and I am doing it as
const useStyles = makeStyles((theme) => ({
root: {
"&:hover": {
borderRadius: "4px",
padding: "3px",
},
},
}));
return (
<div className="App">
<IconButton aria-label="previous" className={classes.root}>
<ArrowLeftIcon />
</IconButton>
</div>
);
But when I hover it, it's flickering and not changing smoothly. I think I am missing some styles to add, but I can't find a way what I'm doing wrong. You can see my codesandbox example here.
If you look at the default styles for IconButton, you'll find that the borderRadius and padding are set directly in the root styles. Only the backgroundColor changes on hover.
If you make the corresponding change to your styles, then it works fine:
const useStyles = makeStyles((theme) => ({
root: {
borderRadius: "4px",
padding: "3px"
}
}));
It's flickering on hover because the padding (the space between its content and border) is modified. Either remove the padding or put it in the default style.
not changing smoothly
This can be easily solved by using css transition. Material-UI theme has a utility method theme.transition.create() to help you create transition quickly.
const useStyles = makeStyles((theme) => ({
root: {
transition: theme.transitions.create(["border-radius"]),
// padding: 3;
"&:hover": {
borderRadius: "4px"
}
}
}));
Live Demo
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.
I am using React and Material UI for my web application. I want to change the hover color of table row but cannot do that.
Sample code:
x={
hover:{
color:'green'
}
}
<TableRow
hover
key={lead.id} className={classes.row}
classes={{
hover:x.hover
}}
onClick={() => {}}
>
I've got this solution so far. Maybe there are other approaches to override css of tableRow but this one works like a charm:
const styles = theme => ({
tableRow: {
"&:hover": {
backgroundColor: "blue !important"
}
}
});
<TableRow hover
key={lead.id} className={classes.tableRow}
onClick={() => {}}>
Feel free to ask any question.
tableRow: {
hover: {
"&$hover:hover": {
backgroundColor: '#49bb7b',
},
},
}
<TableRow className={classes.tableRow} key={n.id} hover onClick={event => this.handleClick(event)}>Text</TableRow>
The implementation of the TableRow component and the customizing components page show that you need to override two classes, root.hover:hover and .hover to change the hover color.
const useStyles = makeStyles((theme) => ({
/* Styles applied to the root element. */
root: {
// Default root styles
color: 'inherit',
display: 'table-row',
verticalAlign: 'middle',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
'&$hover:hover': {
// Set hover color
backgroundColor: theme.palette.action.hover,
},
},
/* Pseudo-class applied to the root element if `hover={true}`. */
hover: {},
}));
Then in your component, you can apply the styles to the classes prop.
const HelloWorld = () => {
const classes = useStyles();
return (
<TableRow classes={classes}><TableCell></TableCell></TableRow>
);
};
You can maintain dependency on the Material UI hover prop by using
hover: {
'&:hover': {
backgroundColor: 'green !important',
},
},
just put hover in the TableRow, but not the header Tablerow
<StyledTableRow hover key={row.name}>
#material-ui/core/TableRow has built in code to deal with hover, it worked for me.
This is a trivial task in MUI v5. See the docs here:
<Table
sx={{
"& .MuiTableRow-root:hover": {
backgroundColor: "primary.light"
}
}}
>
Live Demo
Just in case, if you are using the component overrides and want to do a style override you have to target the root and not the hover rule. I spent quite a while trying to get the pseudo :hover to work on that but it wouldn't ever work.
Here's what I have.
MuiTableRow: {
styleOverrides: {
// Even though there is a hover rule we have to override it here. Don't ask.
root: {
'&.MuiTableRow-hover:hover': {
backgroundColor: 'blue',
},
},
},
},
Use this is you want to override the component at the theme level vs styled overrides, sx or useStyles.
If you're using withstyles you can just override it in the root element like so:
An example of how to do it is here: https://codesandbox.io/s/7249117670
Is there a way of changing the button's min-width property that's rendered inside a <Tab /> in Material UI?
There doesn't seem to be a property that allows that or I cannot find it.
And since I'm new to React, I'm not quite sure what's the proper way of overriding the property.
I've never used this library before, but according to the docs you can use the classes prop to add any custom styles.
In react we usually use the className property to add or overwrite styles for components, according to the material-ui docs, you can use classes which receives an object with the styles you need.
First you need to create the styles:
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: theme.spacing.unit * 3,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
minWidth: 10,
},
});
The in the tab you use the classes prop like this:
<Tab label="X" classes={{ root: classes.tabRoot }} />
Here's an example: https://codesandbox.io/s/l52rw252rm
You can use classes prop to apply width to Tab component.
const style = {
root: {
minWidth: 500
}
}
<Tab classes={style.root} />
Check here for more details.
OR
You can also use inline-style like below
const style = {
minWidth: 500
}
<Tab style={style} />
OR
If you feel inline-styles are lil difficult then customize your components using muitheme. check here for more details.
See if you can override it by using withStyles HOC.
const styles = {
tab: {
width: 140px
}
}
export const MyTab = (props) => {
return (
<Tab className={props.classes.tab} label="Item One" />
);
}
export default withStyles(styles)(MyTab);
Please check this doc regarding overriding classes
How can I override the default value of the max-height property for the Popover component?
I tried to add style={{'maxHeight': '365px'}}, but nothing is changed:
<Popover
style={{'maxHeight': '365px'}}
className='notif-popover'
open={this.state.notifOpen}
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleRequestClose}
>
The only props that apply style are:
className string of classes and style object with styles.
Remember that these are applied to the root element (the Modal component).
Docs SourceCode (if you're using v1-beta). You can see in the sources that the remaining props are passed to the Modal component
const {
anchorEl,
anchorReference,
anchorPosition,
anchorOrigin,
children,
classes,
elevation,
getContentAnchorEl,
marginThreshold,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
open,
PaperProps,
role,
transformOrigin,
transitionClasses,
transitionDuration,
...other
} = this.props;
<Modal show={open} BackdropInvisible {...other}>
You can see in the sources that MaterialUI uses the withStyles HoC from react-jss and has a styles object for the Paper component
export const styles = {
paper: {
position: 'absolute',
overflowY: 'auto',
overflowX: 'hidden',
// So we see the popover when it's empty.
// It's most likely on issue on userland.
minWidth: 16,
minHeight: 16,
maxWidth: 'calc(100vw - 32px)',
maxHeight: 'calc(100vh - 32px)'
maxHeight: 'calc(100vh - 32px)'
This is bound to a class paper and then passed to the classes prop and applied to the Paper component.
Solution:
Use the className prop on the root element with nested selector that targets the Paper component (inspect and see on which element it applies the class).
Example of possible selector (should definitely use a better one, inspect element)
.rootElement > * { max-height: '375px' }
and then you'd do <Popover className='rootElement' />
You should really override the style while building the theme...
createMuiTheme({
overrides: {
MuiTooltip: {
tooltip: {
fontSize: '1rem',
backgroundColor: '#000',
}
}
}
})
This CSS override seems to work for me:
.writeYourOwnClasHere {
.MuiPaper-root-6 {
padding: 30px;
color: pink;
}
}
Btw, it's an unbelievably crappy API.