Что именно делает makeStyles в Material-UI? - PullRequest
Новая
       65

Что именно делает makeStyles в Material-UI?

3 голосов
/ 12 марта 2020

Я только начал изучать React material-ui , и я нашел эту функцию makeStyles, и они сказали, что она возвращает Hook.

Я помню из хуков React, что пользовательский хук это сделано, оборачивая встроенный крюк. Я попытался заглянуть внутрь makeStyles, и у него есть некоторая совместимость и некоторый шаблон css -in- javascript.

Мне действительно надоели правила, приходящие снова и снова. Пока кто-нибудь может сказать мне, что это за функция makeStyle и, возможно, предложить лучший подход к прочтению материала-пользовательского интерфейса.

Спасибо, хорошие люди из Stack Overflow.

1 Ответ

2 голосов
/ 12 марта 2020

Если вы знакомы с более старой версией Material-UI, вы могли бы использовать withStyles , чтобы использовать свои пользовательские стили в компонентах MUI.

withStyles - это просто HO C (Компонент высшего порядка), используемый в качестве оболочки, для назначения классы реквизита для вашего компонента. Кроме того, вы можете использовать объект classes, чтобы назначить определенные c классы вашим элементам DOM или MUI в вашем компоненте.

makeStyles - это просто преемник, который возвращает ловушку (для доступа к пользовательские классы). Теперь это только современный способ действий, позволяющий избежать HOC.

MUI v3.9.3 

import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    backgroundColor: 'red'
  },
};

class MyComponent extends React.Component {
  render () {
    return <div className={this.props.classes.root} />;
  }
}

export default withStyles(styles)(MyComponent);

MUI v4.9.5 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red'
  },
});

export default function MyComponent(props) {
  const classes = useStyles(props);
  return <div className={classes.root} />;
}
...