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.
Related
I am trying to create a custom Tab using Mui's Tab.
The style I want is:
The indicator applied by default is made transparent.
Designate the default background color and font color of the tab.
When a tab is selected, only the background color and font color of the selected tab are changed.
Problem
As follows, 1 and 2 were applied, but the color of the selected tab could not be changed. I am changing the css directly using Mui's styled function, but I don't know where is wrong.
const StyledMuiTab = styled(MuiTab)({
...
'&.Mui-selected': {
backgroundColor: 'red',
color: 'red',
},
});
Also onChange doesn't work.
Source
Tab
import React, { ReactElement, useState } from 'react';
import { Tabs as MuiTabs, Tab as MuiTab, styled } from '#mui/material';
interface Props {
color: string;
children: ReactElement | ReactElement[];
}
const StyledMuiTabs = styled(MuiTabs)<Props>(({ color }) => ({
borderBottom: `1px solid ${color}`,
overflow: 'hidden',
display: 'flex',
'& .MuiTabs-indicator': {
backgroundColor: 'transparent',
},
'& .MuiTab-root.Mui-selected': { // not working
backgroundColor: 'red',
color: 'red',
},
}));
const BasicTabs = ({ children, color }: Props) => {
const [tabIndex, setTabIndex] = useState<number>(0);
const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
console.log(newValue); //not working
setTabIndex(newValue);
};
return (
<StyledMuiTabs
value={tabIndex}
color={color}
variant="scrollable"
scrollButtons={false}
onChange={handleChange}
>
{children}
</StyledMuiTabs>
);
};
interface TabProps {
text: string;
}
const StyledMuiTab = styled(MuiTab)({
textTransform: 'none',
fontFamily: 'Noto Sans KR',
fontStyle: 'normal',
fontWeight: '500',
fontSize: '14px',
lineHeight: '20px',
textAlign: 'center',
background: '#F5F6FA',
border: '1px solid #D4DAE4',
borderRadius: '6px 6px 0px 0px',
color: '#9CA3AF',
'&.Mui-selected': { // not working
backgroundColor: 'red',
color: 'red',
},
});
const Tab = ({ text }: TabProps) => <StyledMuiTab disableRipple label={text} />;
const Tabs = Object.assign(BasicTabs, {
Tab,
});
export default Tabs;
caller
<Tabs color="#0D58EE">
<Tabs.Tab text="one" />
<Tabs.Tab text="two" />
</Tabs>
I have created wrapper for styled scrollbar in react js -
import styled from '#emotion/styled';
export const ScrollbarWrapper = styled.div(() => ({
maxHeight: '65vh',
overflowY: 'auto',
'*::-webkit-scrollbar': {
width: '0.5rem',
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 0.37rem rgba(0,0,0,0.00)',
},
'*::-webkit-scrollbar-thumb': {
backgroundColor: '#d8d8d8',
borderRadius: '0.28rem',
},
}));
I have implemented it as-
<ScrollbarWrapper>
some content...
....
<ScrollbarWrapper>
Stackbiz - https://stackblitz.com/edit/react-sxa5xd?file=src%2FApp.js,src%2Fstyle.ts
But I can see there is no styling particularyle in regards to -webkit-scrollbar
I can see maxheight and overflow auto has got applied.
How can I implement srollbar style also in reactjs?
Removing * from webkit worked for me.
I made css as -
import styled from '#emotion/styled';
export const ScrollbarWrapper = styled.div(() => ({
maxHeight: '65vh',
overflowY: 'auto',
'::-webkit-scrollbar': {
width: '0.5rem',
},
'::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 0.37rem rgba(0,0,0,0.00)',
},
'::-webkit-scrollbar-thumb': {
backgroundColor: '#d8d8d8',
borderRadius: '0.28rem',
},
}));
removing * before ::
just having issues with trying to implememnt a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I am trying to implement an icon within each circle, as seen here from Material UI's demo
however, am coming across an error
Please see my code below. Thanks!
import React from 'react';
import { Typography } from '#material-ui/core';
import { withStyles, styles } from '#material-ui/core/styles';
const styles = theme => ({
checklistHeader: {
fontWeight: 'bold',
marginTop: '80px',
color: 'white'
},
connectorIcon: {
color: theme.palette.text.secondary
},
active: {
backgroundColor: 'green'
}
});
const steps = ['Select campaign settings', 'Select campaign settings', 'Select campaign settings'];
const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
...(ownerState.active && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
}),
...(ownerState.completed && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
}),
}));
const ColorlibStepIcon = ({
icon, active, completed, className
}) => {
const icons = {
1: <Icon style={{ color: 'red' }}>create_outline</Icon>,
2: <Icon style={{ color: 'red' }}>star</Icon>,
3: <Icon style={{ color: 'red' }}>people</Icon>,
};
return (
<ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
{icons[String(icon)]}
</ColorlibStepIconRoot>
);
};
const Stepper = ({ classes }) => {
return (
<React.Fragment>
<Typography variant="h6" align="center" gutterBottom className={classes.checklistHeader}>Please complete the following criterion</Typography>
<Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
{steps.map(label => (
<Step key={label}>
<StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>
</React.Fragment>
);
};
Stepper.defaultProps = {
};
Stepper.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles, { withTheme: true })(Stepper);
It seems like the styled component is undefined. Is there any way that I can bypass this
The styled() function is only available in v5. You either need to upgrade to MUI v5 using this installation guide or use the older API in v4, (The equivalent is withStyles):
V5
import { styled } from '#mui/material/styles';
const StyledComponent = styled(Component)({
// your styles
});
V4
import { withStyles, styles } from '#material-ui/core/styles';
const StyledComponent = withStyles({
// your styles
})(Component);
You can see the v4 docs here and the v5 docs here.
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
I'm working with the divider component of the material ui framework and am stuck with the color changing aspect. With most other components from this framework I've been able to change the color by applying the useStyles() method as such:
const useStyles = makeStyles(theme => ({
textPadding: {
paddingTop: 10,
paddingBottom: 10,
color:'white',
},
}));
But I'm not able to change the color of the dividers using the same approach:
const useStyles = makeStyles(theme => ({
dividerColor: {
backgroundColor: 'white',
},
}));
I of-course then apply it to the component:
<Divider classname={classes.dividerColor}></Divider>
I looked up the docs for it but can't figure out what I've done wrong. Could someone give me a helping hand?
use the classes API to change the divider color:
const useStyles = makeStyles((theme) => ({
divider: {
// Theme Color, or use css color in quote
background: theme.palette.divider,
},
}));
<Divider classes={{root: classes.divider}} />
Divider API, To get your head around Material UI Theme
To change Divider line color in MUI v5 you need to adjust your approach depending on whether the element has children or not.
For an empty Divider:
<Divider sx={{ bgcolor: "secondary.light" }} />
For a Divider with content:
<Divider
sx={{
"&::before, &::after": {
borderColor: "secondary.light",
},
}}
>
<Typography>Some Text</Typography>
</Divider>
Comparing to the other answers for v5, note that you do not need to nest the SX props under &.MuiDivider-root and you can use the theme properties with the SX shorthand strings (e.g., secondary.light instead of (theme) => theme.palette.secondary.light.
You can use
<Divider style={{ background: 'black' }} variant="middle" />
You have to override the CSS using classes.
<Divider classes={{root: classes.dividerColor}} />
See the Material UI docs on CSS overrides: https://material-ui.com/customization/components/#overriding-styles-with-classes
You can directly add color attribute to the divider like so
<Divider color="#FDA228" sx={{ height: 2, width: '92px' }} />
the result would be something like this
You should always use className while using material-ui styling instead of typical javascript style declaration like classname.
You can refer to the official doc also: https://material-ui.com/styles/basics/#hook-api
Using #mui v5 I recognized this was the only way to make it work for myself.
Note:
Because my Divider item has text, the ::before and ::after css
selectors specify which side of the divider to style.
<Divider
sx={{
'&.MuiDivider-root': {
'&::before': {
borderTop: `thin solid ${theme?.palette.primary['700']}`
}
}
}}
style={{
color: "white",
}}
variant="middle"
> Editing as - {username} </Divider>
Example with className :
const useStyles = makeStyles((theme) => ({
divider: {
background: "white",
},
}));
<Divider className={classes.divider} />
In the latest MUI(v5), This is how it is done:
<Divider
sx={{ bgcolor: (theme) => theme.palette.divider }}
style={{
border: "none",
height: 2,
margin: 0,
}}
/>
You can do it with createTheme function inside the react component
const Theme = createTheme({
components: {
MuiDivider: {
variants: [
{
props: { variant: 'dynamic' },
style: {
":before": {
borderTop: "thin solid #ffffff"
},
":after": {
borderTop: "thin solid #ffffff"
},
}
}
]
}
},
})
Use it with the variant key in the html component
<Divider variant={'dynamic'} flexItem></Divider>