В чем разница между withStyle и withTheme в пользовательском интерфейсе?

Question

Я новичок в веб-разработке и пытаюсь использовать материал-интерфейс.Я видел, как некоторые демонстрационные коды используют withStyle, а некоторые другие используют withTheme.Есть ли различия между ними?Большое спасибо!

Answer 1

Я думаю, что принятый ответ недостаточно хорошо объяснен, чтобы быть более понятным:

1) withStyles также предоставляет объект theme при создании стилей CSS;сигнатура функции создания выглядит так:

const styles = theme => ({
  root: {
    maxWidth: 600,
  },
  tabs: {
    borderTopWidth: 1,
    borderTopStyle: 'solid',
    borderColor: theme.palette.divider,
    width: '100%',
  },
});

Как видно, theme и все внутри нее, например, theme.palette, доступно.Официальная документация и примеры есть везде, поэтому я просто выбрал этот .(Нажмите эту кнопку, чтобы отобразить исходные коды: "<>")

2) Цель withTheme состоит в том, чтобы ввести theme в props, чтобы к нему также можно было получить доступ внутри функций компонента, таких какrender, иногда это полезно.Официальная документация здесь .

Answer 2

withStyles переопределяет стиль определенного компонента.

withTheme переопределяет стиль определенного компонента, а также дает вам доступ к теме, так что ваш стиль может быть основан на цветах темы,типографика, интервалы и т. д.

Это может сбивать с толку, поскольку вам необходимо создать новый компонент, используя следующие функции высшего порядка:

const MyCustomBottom = withStyles(styles)(Button);
const MyCustomThemeBasedButton = withTheme(theme)(Button);