Расширение реквизитов sx для запоминания значения и предотвращения повторного рендеринга. ⇐ CSS

[Anonymous]

Свойство sx из MUI полезно для скорости и читаемости кода (по разумным причинам), но оно может вызвать множество ненужных повторных рендерингов (и это сочетается с sx меньшая производительность).
Поэтому мне было интересно, есть ли способ добавить версию реквизита MUI sx в оболочке useMemo. Как бы мне расширить MUI, чтобы добиться этого?
Вот упрощенный пример того, что я имею в виду.
Базовая ситуация:

Код: Выделить всё

const MyComponent = () => {

return

 I am a bit static 
 I am so dynamic! 

};

Это будет оптимизация (в данном случае чрезмерная):

Код: Выделить всё

const MyComponent = () => {
const boxStyle = useMemo(() => ({color: "red"}), [])

return

 I am a bit static 
 I am so dynamic! 

};

Это «API», которого я хочу достичь путем расширения MUI:

Код: Выделить всё

const MyComponent = () => {

return

 I am a bit static 
 I am so dynamic! 

};

Как мне создать расширенную версию sx с помощью useMemo, доступную в любом компоненте MUI?
Я видел этот пакет. Это может быть шагом в правильном направлении.

Подробнее здесь: https://stackoverflow.com/questions/735 ... -rerenders