Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 10x 91x 91x | import { alpha } from "@mui/material/styles";
import { toggleButtonClasses } from "@mui/material/ToggleButton";
// ----------------------------------------------------------------------
const COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
// ----------------------------------------------------------------------
export function toggleButton(theme) {
const rootStyles = (ownerState) => {
const defaultStyle = {
[`&.${toggleButtonClasses.selected}`]: {
borderColor: 'currentColor',
boxShadow: '0 0 0 0.5px currentColor',
},
};
const colorStyle = COLORS.map((color) => ({
...(ownerState.color === color && {
'&:hover': {
borderColor: alpha(theme.palette[color].main, 0.48),
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
},
}),
}));
const disabledState = {
[`&.${toggleButtonClasses.disabled}`]: {
[`&.${toggleButtonClasses.selected}`]: {
color: theme.palette.action.disabled,
backgroundColor: theme.palette.action.selected,
borderColor: theme.palette.action.disabledBackground,
},
},
};
return [defaultStyle, ...colorStyle, disabledState];
};
return {
MuiToggleButton: {
styleOverrides: {
root: ({ ownerState }) => rootStyles(ownerState),
},
},
MuiToggleButtonGroup: {
styleOverrides: {
root: {
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
border: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
},
grouped: {
margin: 4,
[`&.${toggleButtonClasses.selected}`]: {
boxShadow: 'none',
},
'&:not(:first-of-type), &:not(:last-of-type)': {
borderRadius: theme.shape.borderRadius,
borderColor: 'transparent',
},
},
},
},
};
}
|