<!--
title: Prefer direct property access
domain: app-frameworks
topic: Code Style
language: TypeScript
source: mui/material-ui
updated: 2025-05-19
url: https://awesomereviewers.com/reviewers/material-ui-prefer-direct-property-access/
-->

When property names are known at development time, use direct property access (e.g., `object.property`) over computed property access (e.g., `object[propertyName]`). This approach enhances code readability, enables better IDE autocompletion, improves type checking, and makes the code more maintainable.

**Example - Instead of:**
```typescript
output[propName] = clsx(
  defaultProps?.[propName] as string,
  props?.[propName] as string,
);

output[propName] = {
  ...(defaultProps?.[propName] ?? ({} as React.CSSProperties)),
  ...(props?.[propName] ?? ({} as React.CSSProperties)),
};
```

**Prefer:**
```typescript
output.className = clsx(
  defaultProps.className,
  props.className,
);

output.style = {
  ...defaultProps.style,
  ...props.style,
};
```

This approach eliminates unnecessary dynamic property access, type assertions, and optional chaining when the property name is statically known. Code becomes more concise and the intent is clearer.