@mui/material/styles#Components TypeScript Examples

The following examples show how to use @mui/material/styles#Components. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: components.ts    From houston with MIT License 5 votes vote down vote up
export default function components(palette: Partial<Palette>, theme: IHoustonTheme): Components {
  return {
    MuiDialog: {
      defaultProps: {
        TransitionComponent: DefaultDialogTransition
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          padding: '10px 16px',
          height: 40,
          borderRadius: theme.border.radius.xs,
          fontWeight: theme.font.weight.semibold,
          fontFamily: theme.font.family.base,
          lineHeight: theme.line.height.sm,
          fontSize: theme.font.size.xxs,

          '&:before': {
            content: '" "',
            position: 'absolute',
            left: -4,
            right: -4,
            top: -4,
            bottom: -4,
            border: '2px solid transparent',
            transition: '0.3s',
            borderRadius: theme.border.radius.sm
          },

          '&:focus:not(:active):not(:hover):before': {
            borderColor: palette.grey[300]
          }
        },

        iconSizeMedium: {
          '& > *:first-child': {
            fontSize: 15
          }
        },

        sizeSmall: {
          height: 30
        },

        sizeLarge: {
          height: 50
        },

        startIcon: {
          marginRight: 8
        },

        containedPrimary: {
          '&:hover': {
            backgroundColor: palette.primary.light
          },
          '&:active': {
            backgroundColor: palette.primary.dark
          },
          '&.Mui-disabled': {
            color: palette.grey[500],
            backgroundColor: palette.grey[300]
          }
        },

        outlinedPrimary: {
          borderColor: palette.primary.light,
          '&:before': {
            left: -5,
            right: -5,
            top: -5,
            bottom: -5
          },
          '&:hover': {
            backgroundColor: 'transparent'
          },
          '&:active': {
            borderColor: palette.primary.dark,
            color: palette.primary.dark
          },
          '&.Mui-disabled': {
            color: palette.grey[300],
            borderColor: palette.grey[300]
          }
        },

        text: {
          '&.Mui-disabled': {
            color: palette.grey[300]
          }
        }
      }
    },

    MuiTextField: {
      styleOverrides: {
        root: {
          '&.input-size-small': {
            '& input': {
              height: 35,
              padding: '4px 12px'
            },

            '& label': {
              transform: `translate(${theme.spacing.xxxs}, ${theme.spacing.nano}) scale(1)`
            }
          }
        }
      }
    },

    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: theme.font.family.base,

          '&.Mui-disabled': {
            backgroundColor: palette.grey['100']
          }
        }
      }
    },

    MuiInputAdornment: {
      styleOverrides: {
        positionEnd: {
          width: 28
        }
      }
    },

    MuiSelect: {
      styleOverrides: {
        select: {
          '&:focus': {
            backgroundColor: 'transparent'
          },
          '&.input-size-small': {
            height: 35,
            padding: '8px 32px 8px 12px'
          }
        },
        iconOutlined: {
          right: 4
        },
        icon: {
          top: '50%',
          transform: 'translate(0, -50%)'
        }
      }
    },

    MuiSwitch: {
      styleOverrides: {
        root: {
          width: 36,
          height: 40,
          padding: 0,
          alignItems: 'center',
          overflow: 'unset'
        },
        switchBase: {
          left: -10,
          padding: 12,
          overflow: 'hidden',
          '&.Mui-checked': {
            transform: 'translateX(16px)',
            '& > .MuiSwitch-thumb': {
              color: 'white'
            },
            '& + .MuiSwitch-track': {
              backgroundColor: palette.primary.main,
              borderColor: palette.primary.main,
              opacity: '1 !important'
            }
          },
          '&.Mui-disabled': {
            color: palette.grey[400],
            '& > .MuiSwitch-thumb': {
              color: palette.grey[400]
            },
            '& + .MuiSwitch-track': {
              backgroundColor: palette.grey[300],
              opacity: '1 !important',
              borderColor: palette.grey[300]
            }
          }
        },
        thumb: {
          width: 16,
          height: 16,
          boxShadow: 'none',
          transition: 'color 150ms cubic-bezier(0.4, 0, 0.2, 1)',
          '&:hover': {
            color: palette.primary.light
          }
        },
        track: {
          backgroundColor: palette.grey[300],
          border: `2px solid ${palette.grey[300]}`,
          width: 36,
          height: SWITCH_MEDIUM_HEIGHT,
          borderRadius: SWITCH_MEDIUM_HEIGHT / 2,
          opacity: '1 !important'
        },
        sizeSmall: {
          width: 28,
          height: 40,
          padding: 0,
          alignItems: 'center',
          overflow: 'unset',
          '& > .MuiSwitch-switchBase': {
            top: 2,
            padding: 12,
            '& + .MuiSwitch-track': {
              width: 28,
              height: SWITCH_SMALL_HEIGHT
            },
            '&.Mui-checked': {
              transform: 'translateX(12px)'
            },
            '& > .MuiSwitch-thumb': {
              width: 12,
              height: 12
            }
          }
        }
      }
    },

    MuiOutlinedInput: {
      styleOverrides: {
        input: {
          height: 45,
          boxSizing: 'border-box',
          fontSize: theme.font.size.xs,
          padding: `${theme.spacing.xxxs} ${theme.spacing.xxxs}`
        },
        inputMultiline: {
          minHeight: 96
        }
      }
    },

    MuiFormHelperText: {
      styleOverrides: {
        root: {
          fontFamily: theme.font.family.base,
          fontSize: theme.font.size.xxxs,
          lineHeight: theme.line.height.sm
        },
        contained: {
          marginLeft: 2,
          marginRight: 0
        }
      }
    },

    MuiFormControlLabel: {
      styleOverrides: {
        root: {
          color: palette.grey[500],
          fontFamily: theme.font.family.base
        }
      }
    },

    MuiFormControl: {
      styleOverrides: {
        marginNormal: {
          marginTop: theme.spacing.quarck,
          marginBottom: theme.spacing.xxxs
        }
      }
    },

    MuiFormLabel: {
      styleOverrides: {
        root: {
          color: palette.grey[500],
          fontFamily: theme.font.family.base
        }
      }
    },

    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontFamily: theme.font.family.base,
          fontSize: theme.font.size.xs
        },
        outlined: {
          transform: 'translate(16px, 12px) scale(1)'
        },
        shrink: {
          transform: 'translate(16px, -6px) scale(0.70) !important'
        }
      }
    },

    MuiAlertTitle: {
      styleOverrides: {
        root: {
          fontWeight: theme.font.weight.semibold
        }
      }
    },

    MuiAlert: {
      styleOverrides: {
        root: {
          borderRadius: 4
        },

        icon: {
          color: `${palette.grey[600]} !important`
        },

        action: {
          marginRight: 0,
          '&:empty': {
            display: 'none'
          }
        },

        message: {
          fontWeight: theme.font.weight.regular,
          color: palette.grey[600],
          width: '100%'
        },

        standardSuccess: {
          backgroundColor: palette.success['light']
        },

        standardError: {
          backgroundColor: palette.error['light']
        },

        standardInfo: {
          backgroundColor: palette.info['light']
        },

        standardWarning: {
          backgroundColor: palette.warning['light']
        }
      }
    },

    MuiTableRow: {
      styleOverrides: {
        root: {
          '&$selected': {
            background: 'rgba(177, 177, 177, 0.08)'
          },

          '&$hover': {
            '&:hover': {
              background: palette.grey[100]
            }
          }
        }
      }
    },

    MuiTableCell: {
      styleOverrides: {
        root: {
          padding: '12px 20px',
          borderColor: palette.grey[200],
          color: palette.grey[600]
        },

        head: {
          fontWeight: theme.font.weight.semibold,
          color: palette.grey[600],
          lineHeight: theme.line.height.sm
        },

        body: {
          color: palette.grey[600]
        },

        sizeSmall: {
          fontSize: theme.font.size.xxs,
          padding: '8px 12px'
        }
      }
    },

    MuiTableSortLabel: {
      styleOverrides: {
        root: {
          color: palette.grey[600],

          '&:focus': {
            color: 'inherit'
          },

          '&$active': {
            color: palette.grey[600],

            '&$root': {
              '&$active': {
                '& $icon': {
                  color: palette.grey[600]
                }
              }
            }
          }
        }
      }
    },

    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontSize: theme.font.size.xs,
          fontWeight: theme.font.weight.regular
        }
      }
    },

    MuiPaginationItem: {
      styleOverrides: {
        root: {
          margin: '0 1px',
          minWidth: 32,
          minHeight: 28,
          padding: 0,
          fontWeight: theme.font.weight.semibold,

          '&$selected': {
            color: palette.primary.main
          },

          '@media screen and (max-width: 599.95px)': {
            width: 26,
            minWidth: 26,
            height: 24
          }
        }
      }
    },

    MuiPagination: {
      styleOverrides: {
        ul: {
          '& li': {
            '&:first-child, &:last-child': {
              borderRadius: 4
            },

            '&:first-child': {
              marginRight: 2
            },

            '&:last-child': {
              marginLeft: 2
            }
          }
        }
      }
    },

    MuiIconButton: {
      styleOverrides: {
        colorPrimary: {
          '&:hover, &:focus': {
            backgroundColor: `${palette.grey[200]}`
          },
          '&:active': {
            backgroundColor: `${palette.grey[300]}`
          }
        }
      }
    },

    MuiTabs: {
      styleOverrides: {
        root: {
          height: 40,
          minHeight: 40,
          borderBottom: `1px solid ${palette.grey[200]}`
        },
        scrollButtons: {
          color: palette.primary['main'],
          opacity: 1,
          '&.Mui-disabled': {
            opacity: 1,
            color: palette.grey[300]
          }
        }
      }
    },

    MuiTab: {
      styleOverrides: {
        root: {
          height: 40,
          minHeight: 40,
          minWidth: '0 !important',
          lineHeight: theme.line.height.md,
          fontSize: theme.font.size.xxs,
          fontWeight: theme.font.weight.semibold,
          textTransform: 'none',
          padding: `0 ${theme.spacing.xxxs}`
        },
        labelIcon: {
          minHeight: 40,
          paddingTop: 0,
          flexDirection: 'row',
          '& > svg': {
            marginBottom: '0 !important',
            maxWidth: 20,
            maxHeight: 20,
            marginRight: theme.spacing.nano
          }
        },
        textColorPrimary: {
          color: palette.grey[400],
          transition: '0.3s',
          border: '2px solid transparent',
          borderBottom: 'none',
          borderRadius: `${theme.border.radius.xs} ${theme.border.radius.xs} 0 0`,
          '& svg': {
            fill: palette.grey[500],
            transition: '0.3s'
          },
          '&:focus': {
            borderColor: palette.grey[300]
          },
          '&:hover:not($selected):not(:active)': {
            color: palette.primary['light'],
            '& svg': {
              fill: palette.primary['light']
            }
          },
          '&:active': {
            color: palette.primary['dark'],
            '& svg': {
              fill: palette.primary['dark']
            }
          },
          '&$selected': {
            color: palette.primary['main'],
            '& svg': {
              fill: palette.primary['main']
            }
          },
          '&.Mui-disabled': {
            color: palette.grey[300],
            '& svg': {
              fill: palette.grey[300]
            }
          }
        }
      }
    },

    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: theme.font.size.xxxs,
          backgroundColor: palette.grey[600],
          letterSpacing: 0.5
        },

        arrow: {
          color: palette.grey[600]
        }
      }
    },

    MuiTypography: {
      styleOverrides: {
        body2: {
          color: palette.grey[400]
        }
      }
    },

    MuiStep: {
      styleOverrides: {
        horizontal: {
          paddingLeft: 0,
          paddingRight: 0
        }
      }
    },

    MuiStepLabel: {
      styleOverrides: {
        root: {
          '&$error': {
            color: palette.error.main
          }
        },
        label: {
          color: palette.grey[300],
          fontSize: theme.font.size.xs,
          lineHeight: 1.5,
          fontWeight: theme.font.weight.semibold,
          '&$active': {
            color: palette.success.main,
            fontWeight: theme.font.weight.semibold
          },
          '&$completed': {
            color: palette.success.main,
            fontWeight: theme.font.weight.semibold
          }
        },
        iconContainer: {
          paddingRight: 18
        }
      }
    },

    MuiPaper: {
      styleOverrides: {
        root: {
          boxShadow: '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d'
        }
      }
    }
  };
}