React and Material UI, есть ли чистый способ де-структурирования реквизита, который я посылаю useStyles

Question

Из документации по материалам, вот как мы отправляем реквизиты для использования стилей

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});
function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);
  return <div className={`${classes.foo} ${classes.bar}`} />
}

Если я превращу свои правила стиля в полные функции и сделаю так, как мы обычно это делаем, это будет повторение

export const useStyles = makeStyles(
  theme => ({
    drawer(props) {
      const {isNavOpen} = props;
      return {
        width: isNavOpen ? drawerWidth : drawerWidthClosed,
};
    },
    drawerPaper(props) {
      const {isNavOpen} = props;
      return {
        width: isNavOpen ? drawerWidth : drawerWidthClosed,
      };
    },

const {isNavOpen} = реквизиты; здесь повторяется

Answer 1

Вы можете создать функцию, которую можно использовать следующим образом, чтобы избежать повторения

const styleDrawerWidth = ( isNavOpen) => {
    return isNavOpen ? drawerWidth : drawerWidthClosed
}


export const useStyles = makeStyles(
theme => ({
    drawer(props) {
    const {isNavOpen} = props;
    return {
        width: styleDrawerWidth(isNavOpen),
    };
    },
    drawerPaper(props) {
    const {isNavOpen} = props;
    return {
        width: styleDrawerWidth(isNavOpen),
    };
},