@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
59 lines • 2.06 kB
JavaScript
import { styled } from '@mui/material/styles';
import { DataGridPro } from '@mui/x-data-grid-pro';
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
'& .MuiDataGrid-main': {
borderRadius: theme.shape.borderRadius,
},
'& .MuiDataGrid-columnHeaders': {
backgroundColor: theme.palette.mode === 'dark'
? theme.palette.grey[800]
: theme.palette.grey[50],
borderBottom: `2px solid ${theme.palette.divider}`,
'& .MuiDataGrid-columnHeader': {
fontWeight: 600,
fontSize: '0.875rem',
'&:focus': {
outline: 'none',
},
},
},
'& .MuiDataGrid-cell': {
borderBottom: `1px solid ${theme.palette.divider}`,
'&:focus': {
outline: 'none',
},
},
'& .MuiDataGrid-row': {
'&:hover': {
backgroundColor: theme.palette.mode === 'dark'
? theme.palette.grey[800]
: theme.palette.grey[50],
},
'&.Mui-selected': {
backgroundColor: theme.palette.mode === 'dark'
? `${theme.palette.primary.main}20`
: `${theme.palette.primary.main}10`,
'&:hover': {
backgroundColor: theme.palette.mode === 'dark'
? `${theme.palette.primary.main}30`
: `${theme.palette.primary.main}20`,
},
},
},
'& .MuiDataGrid-footer': {
borderTop: `1px solid ${theme.palette.divider}`,
backgroundColor: theme.palette.mode === 'dark'
? theme.palette.grey[900]
: theme.palette.grey[50],
},
'& .MuiTablePagination-root': {
color: theme.palette.text.secondary,
},
'& .MuiDataGrid-toolbarContainer': {
padding: theme.spacing(1),
borderBottom: `1px solid ${theme.palette.divider}`,
},
}));
//# sourceMappingURL=DataGrid.style.js.map