Material-UI, как объединить несколько стилей с темой в машинописи?

Question

У меня есть два стиля.

в global.ts

const globalStyles = (theme: Theme) => {
  return {
    g: {
      marginRight: theme.spacing(40),
    },
  }
}

export const mergedStyle = (params: any) => makeStyles((theme: Theme) =>
  createStyles({
    ...globalStyles,
    ...params
  }),
);

в App.tsx

import * as Global from './global';

const localStyles = (theme: Theme) => {
  return {
    l: {
      marginRight: theme.spacing(20),
    },
  }
}

export default function DenseAppBar() {
  const classes = Global.mergedStyle(localStyles)();

  return (
    <div>
      <MenuIcon className={classes.l} />
      <MenuIcon className={classes.g} />
      <MenuIcon />
    </div>
  );
}

Нет ошибки компиляции, но это не работает Как мне изменить мой код?

Я добавил коды и поле.

https://codesandbox.io/s/confident-hamilton-6eect

Answer 1

Использовать общий makeStyles для генерации внутреннего контента с spread_syntax вполне подойдет.

const style1 = (theme) => {
  return {
    a: {
      marginRight: theme.spacing(1),
    }
  }
}
const style2 = (theme) => {
  return {
    b: {
      marginRight: theme.spacing(2),
    }
  }
}
const mergedStyle = makeStyles((theme: Theme) =>
  createStyles({
    ...style1(theme),
    ...style2(theme),
  }),
);

Использование

export default function MyComponent() {
  const classes = mergedStyle();
  return (
    <>
      <div className={classes.a}></div>
      <div className={classes.b}></div>
    </>
  )
}

Попробуйте онлайн:

---

Обновление

Если вы хотите передать параметры в mergeStyle функцию

const mergedStyle = (params) =>makeStyles((theme: Theme) =>
  createStyles({
    ...
  }),
);

использование

const classes = mergedStyle(params)();

---

Смежный вопрос: как комбинировать каждый созданный стиль в материале