javascript - Material-UI，如何在 typescript 中将多种样式与主题合并？

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

<小时/>

相关问题:how-to-combine-each-maked-styles-in-material-ui