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>
  );
}

没有任何编译错误，但它不起作用。 我应该如何修改我的代码？

我添加了codesandbox。

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)();

---

相关问题：