Use theme utilities consistently

Always use theme utilities for consistent styling across the application instead of hard-coded values. Replace direct pixel values with theme functions like theme.spacing() for spacing, and access theme variables directly with theme.vars.* for theme-aware styling:

// Don't
padding: 16,
paddingBottom: 24,

// Do
padding: theme.spacing(2),
paddingBottom: theme.spacing(3),

For complex component styling, prefer the styled API over the sx prop as it offers better performance and readability, especially with longer style definitions:

// Less optimal for complex styling
<ToggleButtonGroup
  sx={(theme) => ({
    gap,
    ...(orientation === 'horizontal' && {
      // many complex styles...
    })
  })}
/>

// Better for complex styling
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
  gap: props.gap,
  ...(props.orientation === 'horizontal' && {
    // many complex styles...
  })
}));

Choose the simplest CSS solutions possible and avoid unnecessary inline comments for self-explanatory style changes. When modifying properties, use specific CSS properties (like overflowY: 'auto' instead of overflow: 'auto') when the intent is clear.