Develop Reference

remove MUI Accordion gap when expanded

I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to summary elements while it is in the expanded mode. I add this code to the summary element but that's not working. what do you offer me? it worth mentioning that it works on the first accordion but not the others!!!!!!!!!!
sx={{
"&.Mui-expanded": {
minHeight: 0,
margin: '12px 0',
},
"& .MuiAccordionSummary-content.Mui-expanded": {
margin: 0,
}
}}

I used MUI customized accordion and I change its setting to it:
I used my icon. it has a white background and no border and additional padding or margin :))))
export const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
position: 'unset',
border: 'none',
boxShadow: 'none',
maxWidth: 720,
margin: '12 0',
'&:before': {
display: 'none',
border: 'none'
}
}));
export const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
))(({ theme }) => ({
backgroundColor: 'white',
padding: 0,
flexDirection: 'row',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(180deg)'
}
}));
export const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: 0,
border: 'none'
}));
export const FAQText = styled(Typography)({
maxWidth: 628
});

Are you setting this prop on Accordion or AccordionSummary? I've tested your code on StackBlitz by setting it on Accordion element and it worked properly.

Change disabled Material UI checkbox color or background color

The disabled unchecked checkbox look a bit too subtle and I would like to have them have a grey background and for the cursor to be of type not-allowed.
Unfortunately I cannot figure out how to apply these styles on the checkbox using the makeStyles. This is what my current code looks like:
const useStyles = makeStyles((theme) => ({
disabledCheckbox: {
cursor: 'not-allowed',
color: 'grey',
backgroundColor: 'grey',
},
}));
// ...
const App = () => {
const classes = useStyles();
return (
<div>
Disabled:
<Checkbox
disabled={true}
name="Disabled checkbox"
classes={{ disabled: classes.disabledCheckbox }}
/>
</div>
);
};
Unfortunately this does nothing, and the disabled checkbox looks the same. Here is a demo app to compare a disabled and enabled one.
What am I doing wrong? How can I change the background color of an unselected MUI disabled checkbox:

Using the disabled class by itself does not provide sufficient specificity to override the default styles in IconButton. Also, you don't want to override the background-color for the entire checkbox or it will fill in the entire area that gets the hover effect for the checkbox; instead you just want to target the icon within the checkbox (and even that is slightly more than ideal -- more about that later).
Below is a way of defining the styles with enough specificity to target just the icon. Overriding the cursor requires some additional work because by default Material-UI disables pointer events on disabled buttons (Checkbox leverages SwitchBase which uses IconButton which uses ButtonBase) and the cursor CSS has no effect when pointer events are disabled. The CSS below turns pointer events back on, but then it is necessary to turn off the hover effect which was previously prevented via pointerEvents: 'none'.
const useStyles = makeStyles((theme) => ({
backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root': {
backgroundColor: '#eee',
},
},
},
}));
Unfortunately, this still doesn't produce quite what you likely want. The box of the checkbox icon does not extend to the edge of the 24px-by-24px box that the icon resides in, so when you set a background color it bleeds out of the box:
In order to fill the inner box of the checkbox without changing the color of the couple pixels outside that box, you need to create a custom icon.
The code below creates a custom icon that is identical to the default unchecked icon except that it adds a second path duplicating the inner box of the checkbox without any fill so that it can be targeted via CSS.
import React from 'react';
import createSvgIcon from '#material-ui/icons/utils/createSvgIcon';
export default createSvgIcon(
<>
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
<path fill="none" class="innerBox" d="M19 5v14H5V5h14" />
</>,
'CustomUnchecked'
);
Then you can target this inner box as follows:
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root .innerBox': {
fill: '#eee',
},
},
}
}));
In order for this to work, you need to specify the custom icon on the checkbox. It is also possible to do all of this via the theme if you want all of your disabled checkboxes to look like this.
Below is a working example demonstrating doing this via both makeStyles and via the theme.
import { Checkbox } from '#material-ui/core';
import {
makeStyles,
createMuiTheme,
ThemeProvider,
} from '#material-ui/core/styles';
import CustomUncheckedIcon from './CustomUnchecked';
import React from 'react';
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root .innerBox': {
fill: '#eee',
},
},
},
backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
'& .MuiSvgIcon-root': {
backgroundColor: '#eee',
},
},
},
}));
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
props: {
MuiCheckbox: {
icon: <CustomUncheckedIcon />,
},
},
overrides: {
MuiCheckbox: {
root: {
'&.Mui-disabled': {
pointerEvents: 'auto',
'&:hover': {
backgroundColor: 'transparent',
},
cursor: 'not-allowed',
// This syntax is necessary (instead of just ".MuiSvgIcon-root") because of the nested theme causing the global class names to be suffixed)
'& [class*=MuiSvgIcon-root] .innerBox': {
fill: '#eee',
},
},
},
},
},
});
const App = () => {
const classes = useStyles();
return (
<ThemeProvider theme={defaultTheme}>
<div style={{ marginBottom: '16px' }}>
Styled via makeStyles
<br />
Disabled without custom icon:
<Checkbox
className={classes.backgroundColorOnWholeIcon}
disabled={true}
name="Disabled checkbox"
/>
<br />
Disabled:
<Checkbox
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
disabled={true}
icon={<CustomUncheckedIcon />}
name="Disabled checkbox"
/>
Enabled:
<Checkbox
icon={<CustomUncheckedIcon />}
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
name="Enabled checkbox"
/>
</div>
<ThemeProvider theme={theme}>
<div>
Styled via theme
<br />
Disabled:
<Checkbox disabled={true} name="Disabled checkbox" />
Enabled:
<Checkbox name="Enabled checkbox" />
</div>
</ThemeProvider>
</ThemeProvider>
);
};
export default App;

There is option to pass checked icon and unchecked Icon , by style you need to select Icon first then you can use 'input:disabled ~ &': to change style of disabled checkbox , You can use styling like below
const useStyles = makeStyles({
root: {
'&:hover': {
backgroundColor: 'transparent',
},
},
icon: {
borderRadius: 3,
width: 16,
height: 16,
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
backgroundColor: '#f5f8fa',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
'$root.Mui-focusVisible &': {
outline: '2px auto rgba(19,124,189,.6)',
outlineOffset: 2,
},
'input:hover ~ &': {
backgroundColor: '#ebf1f5',
},
'input:disabled ~ &': {
boxShadow: 'black',
background: 'rgba(0,0,0,0.5)',
},
},
checkedIcon: {
backgroundColor: '#137cbd',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 16,
height: 16,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#106ba3',
},
},
});
Refer to sandbox below

How can I use CSS #media for responsive with makeStyles on Reactjs Material UI?

const useStyles = makeStyles(theme => ({
wrapper: {
width: "300px"
},
text: {
width: "100%"
},
button: {
width: "100%",
marginTop: theme.spacing(1)
},
select: {
width: "100%",
marginTop: theme.spacing(1)
}
}));
Is there a way to use CSS #media at the above variable?
if impossible, how can I make my custom css for responsive?

Below is an example showing two ways of specifying media queries within makeStyles (further down is a v5 example using styled). You can use up, down, only, and between functions in theme.breakpoints (which generate the media query strings for you based on the breakpoints specified in the theme), or you can use media queries directly.
import React from "react";
import Button from "#material-ui/core/Button";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
button: {
color: "white",
[theme.breakpoints.down("xs")]: {
marginTop: theme.spacing(1),
backgroundColor: "purple"
},
[theme.breakpoints.between("sm", "md")]: {
marginTop: theme.spacing(3),
backgroundColor: "blue"
},
"#media (min-width: 1280px)": {
marginTop: theme.spacing(5),
backgroundColor: "red"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<Button className={classes.button} variant="contained">
Hello World!
</Button>
);
}
Related documentation:
https://material-ui.com/customization/breakpoints/
https://cssinjs.org/jss-plugin-nested/?v=v10.1.1#nest-at-rules
Below is a similar example using v5 of Material-UI. This has been adjusted to use styled instead of makeStyles and the usage of theme.breakpoints.down and theme.breakpoints.between has been adjusted based on the changes in behavior for those functions (down is now exclusive of the specified breakpoint rather than inclusive and the end breakpoint for between is also now exclusive, so for both of those the breakpoint specified needs to be one up from what would have been used in v4). Also, the min-width of the media-query that is specified directly has been adjusted from 1280px to 1200px to match the new value of the lg breakpoint in v5.
import React from "react";
import Button from "#material-ui/core/Button";
import { styled } from "#material-ui/core/styles";
const StyledButton = styled(Button)(({ theme }) => ({
color: "white",
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1),
backgroundColor: "purple"
},
[theme.breakpoints.between("sm", "lg")]: {
marginTop: theme.spacing(3),
backgroundColor: "blue"
},
"#media (min-width: 1200px)": {
marginTop: theme.spacing(5),
backgroundColor: "red"
}
}));
export default function App() {
return <StyledButton variant="contained">Hello World!</StyledButton>;
}
Documentation on changes to breakpoints from v4 to v5: https://next.material-ui.com/guides/migration-v4/#theme

I can't fix added height into the component

I am working in react.js project using material-ui and sass.I need to create Component like ChatBit component then i wrote it as it published.
customComponent.js file.
// #flow
import * as React from 'react';
import { useState } from 'react';
import { Avatar} from "#material-ui/core";
import useStyle from './styles';
type Props = {
children: React.Node;
}
const AbsoluteBox = ({
children
}: Props) => {
const [toggled, setToggled] = useState(false);
const styles = useStyle();
const handleClick = () => {
setToggled(!toggled);
};
const contentStyle = `container__content_${toggled ? 'show': 'hide'}`;
return (
<div className={styles.container__bottomRight}>
<div className={styles.container__header} onClick={handleClick}>
<Avatar
variant="rounded"
src="/assets/images/rebots.svg"
className={styles.container__header__avatar}
/>
</div>
<div
className={styles[contentStyle]}
>
{children}
</div>
</div>
);
};
export default AbsoluteBox;
styles.js file.
import { makeStyles } from '#material-ui/core';
export default makeStyles({
container__bottomRight: {
position: 'fixed',
right: 0,
bottom: 0,
marginRight: 12,
width: 300,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
boxShadow: '0px 0px 13px 0px rgba(0,0,0,0.51)'
},
container__header: {
paddingLeft: 10,
paddingTop: 4,
paddingBottom: 6,
backgroundColor: '#D7E0FC',
height: 38,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
cursor: 'pointer'
},
container__header__avatar: {
height: 40
},
container__content_hide: {
transition: 'height 400ms 400ms, opacity 400ms 0ms',
opacity: 0.0,
height: 0,
},
container__content_show: {
height: 400,
opacity: 1.0,
boxSizing: 'border-box',
transition: 'height 400ms 0ms, opacity 400ms 400ms',
},
});
then i call the Component like that:
<AbsoluteBox>
<h1>Hello World</h1>
</AbsoluteBox>
so the probleme which i found is when i open the box, everything is correct but when i need to close it, there white space which i don't where is it coming from.

The <h1> tag that you have inside the box has margin, which cause those issues (the margin is taking place even if the height of the contains is set to 0).
You can fix this by setting the margin-top of the h1 element to 0 (or using some other elements and style them accordingly).

Inline styles and ReactCSSTransitionGroup

I it possible to use ReactCSSTransitionGroup from react-addons-css-transition-group with React inline styles? If so, how?
The component I'm working on:
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { removeNotification } from '../actionCreators'
import Notification from './Notification'
const mapStateToProps = state => ({
notifications: state.notifications
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ removeNotification }, dispatch)
})
class Notifications extends Component {
render() {
var style = {
position: 'fixed',
top: 20,
right: 20,
width: 300,
zIndex: 99
}
var tstyle = {
'notification-enter': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)'
},
'notification-leave': {
visibility: 'visible',
transform: 'translate3d(0,0,0)'
},
'notification-enter-notification-enter-active': {
visibility: 'visible',
transform: 'translate3d(0,0,0)',
transition: 'all 0.4s'
},
'notification-leave-notification-leave-active': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)',
transition: 'all 0.4s'
}
}
return (
<ul style={style}>
<ReactCSSTransitionGroup
style={tstyle}
transitionName='notification'
transitionEnterTimeout={400}
transitionLeaveTimeout={400}>
{this.props.notifications.map((notification, index) => {
return <Notification
key={index}
type={notification.type}
message={notification.message}
timeout={10000}
remove={this.props.actions.removeNotification} />
})}
</ReactCSSTransitionGroup>
</ul>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Notifications)

ReactCSSTransitionGroup is not compatible with inline styles because it adds or removes class names to/from DOM nodes to trigger the transitions. But you can use ReactTransitionGroup to make your own component that does the same thing ReactCSSTransitionGroup does, but with inline styles.
If you don't want to develop your own, you can use one that I wrote some time ago installing it with npm: ReactInlineTransitionGroup.
It has some advantages over ReactCSSTransitionGroup, like the fact that you can write your CSS transitions and not worry about setting timeout properties in the component, and that you can pass callbacks to check when a child entered or left your group.

DO THIS
style={{
// flex: over ? 1 : null,
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms',
cursor: 'pointer',
}}
Or if you wanna get multiple properties
style={{
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms, padding 500ms, width 500ms, border 500ms',
cursor: 'pointer',
}}