Move hovered CSS definition outside OutlookSettingItem component #39422
Description
Problem
In the OutlookSettingItem component, the hovered CSS style is defined inside the functional component.
File:
apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx
Currently:
const OutlookSettingItem = (...) => {
const hovered = css&:hover, &:focus { background: ${Palette.surface['surface-hover']}; .rcx-message { background: ${Palette.surface['surface-hover']}; } };
}
Defining CSS inside the component causes the style to be recreated on every render.
Why this is an issue
When a component re-renders, the css function will generate a new class each time.
This can cause unnecessary style recalculation and affect performance.
In many places in the Rocket.Chat codebase, styles created with css are defined outside the component so that they are created only once.
Proposed Solution
Move the hovered CSS definition outside the OutlookSettingItem component so it is created once instead of on every render.
Example structure:
const hovered = css&:hover, &:focus { background: ${Palette.surface['surface-hover']}; };
const OutlookSettingItem = (...) => {
...
}
Impact
- Improves performance by avoiding style recreation on every render
- Aligns the component with the styling pattern used across the codebase
- No functional behavior changes
File Location
apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx