Material-UI определенно умен в этом отношении. Если бы это было не так, у вас была бы такая же проблема с компонентами Material-UI, такими как ListItem. Пока makeStyles вызывается на верхнем уровне (что является типичным шаблоном), так что вы всегда используете одну и ту же функцию useStyles, все в порядке. Компонент, который использует стили, имеет больше накладных расходов, чем тот, который этого не делает, но он не будет дублировать стили в DOM.
Смарты в библиотеке можно найти здесь: https://github.com/mui-org/material-ui/blob/v4.9.13/packages/material-ui-styles/src/makeStyles/makeStyles.js#L56
let sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
Это поиск в кэше для конкретной таблицы стилей. stylesOptions.sheetsManager всегда будет таким же , если вы не настраиваете его (очень редко) для части иерархии компонентов с помощью StylesProvider. stylesCreator - это аргумент makeStyles, то есть объявление ваших стилей. Таким образом, для одного и того же вызова makeStyles и той же темы он найдет те же стили и избегает их повторного создания.
Вы можете легко убедиться, что все работает как задумано, посмотрев на элементы <style> в <head> вашего документа с помощью инструментов разработчика. Изображение ниже взято из этой страницы , которая является песочницей для этого другого ответа StackOverflow .
Вы можете увидеть на изображении элементы style для различных компонентов пользовательского интерфейса материала, используемых на странице (например, MuiSvgIcon, MuiListItem и др. c.). Вы также можете увидеть один сгенерированный из makeStyles и один сгенерированный из withStyles. Случай withStyles аналогичен тому, что вы описываете - это стили для компонента ListItem, который используется на странице несколько раз, но стили встречаются в документе только один раз.