반응형
- 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 옵션 줘야 함
댓글