Which strategy optimizes style prop performance in large-scale lists?

Runtime Overhead in Dynamic Lists

Chakra UI leverages a CSS-in-JS approach via Emotion, allowing styles to be passed directly as props. While this provides high flexibility, the runtime processing required to transform these props into CSS classes can introduce performance overhead when rendering a high volume of components simultaneously.

In scenarios involving large data grids or long lists where each item utilizes multiple style props, the cumulative effect of these calculations may impact the frame rate during scrolling or initial mount.

What is the recommended approach to minimize this runtime cost without abandoning the design token system? Does migrating specific high-frequency components to standard CSS modules or using the sx prop provide a measurable reduction in style recalculation overhead?