MUI 까다로운 커스텀 모음

• tooltip

const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} arrow />)(
  ({ theme }) => ({
    [`& .MuiTooltip-tooltip`]: {
      backgroundColor: theme.palette.primary.dark,
      color: theme.palette.text.primary,
      fontSize: '13px',
      boxShadow: theme.shadows[4],
      padding: theme.spacing(2),
    },
    [`& .MuiTooltip-arrow`]: {
      color: theme.palette.primary.dark,
    },
  }),
)

• scroll

const StyledLogViewer = styled('div')(({ theme, width, height }) => ({
  width: width ?? '1200px',
  height: height ?? 'calc(100vh - 370px)',
  backgroundColor: '#333',
  color: '#fff',
  borderRadius: '4px',
  overflowY: 'scroll',
  '&::-webkit-scrollbar': {
    width: 12,
    height: 12,
  },
  // horizontal scrollbar
  '&::-webkit-scrollbar-track:horizontal': {
    backgroundColor: theme.palette.divider,
  },
  '&::-webkit-scrollbar-thumb:horizontal': {
    borderRadius: '10px',
    backgroundColor: theme.palette.divider,
  },
  // vertical scrollbar
  '&::-webkit-scrollbar-track:vertical': {
    backgroundColor: 'none',
  },
  '&::-webkit-scrollbar-thumb:vertical': {
    borderRadius: '10px',
    backgroundColor: theme.palette.divider,
  },
  '&::-webkit-scrollbar-corner': {
    backgroundColor: 'none',
  },
  '& .ReactVirtualized__Grid__innerScrollContainer': {
    position: 'static !important',
  },
  '& .ReactVirtualized__Grid__innerScrollContainer::-webkit-scrollbar': {
    width: 0,
  },
}))

• accordion

const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
  position: 'sticky',
  top: '-10px',
  zIndex: 100,
  minHeight: 20,
  border: '1px solid',
  borderRadius: '4px',
  borderColor: theme.palette.divider,
  '& .MuiAccordionSummary-content': {
    margin: '0',
  },
}))

const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
  margin: '0',
  padding: '4px 0 0 0',
}))

++ Accordion에 disabledGutter 옵션 줘야 함