React：如何组合 Material-UI 中标记的多个样式

IT技术 javascript css reactjs styles material-ui
2021-05-07 10:13:07

我有两种风格。

一件事包含在特定组件中，另一件事包含在全局组件中。

例如，假设我们有以下树。

index.tsx
-App.tsx
-globalConstants.ts

在 globalConstants.ts

import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';

export const sharedStyles = makeStyles((theme: Theme) =>
  createStyles({
    .
    .
    .
  }),
);

在 App.tsx

import React from 'react';
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';
import { sharedStyles } from '../constants/globalConstants'

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

我的问题是我不能将 useStyles 和 sharedStyles 组合成一个类变量。

当然，我可以像下面这样使用它

export default function NavBar() {
  const classes = useStyles();
  const sharedClasses = sharedStyles();
}

但我想将类和共享类组合成一个常量，例如

const classes = {useStyles()+sharedStyles())

有什么好的方法来结合它吗？

1个回答

好吧，这似乎让我们找到了一个基于开放的答案，不过，我还是想提供一些我发现的方法。

参考material-ui官方文档：styles_advanced

您可以使用像clsx这样的第三方库。

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

const useStylesBase = makeStyles({
  root: {
    color: 'blue', // 🔵
  },
});

const useStyles = makeStyles({
  root: {
    color: 'red', // 🔴
  },
});

export default function MyComponent() {
  // Order doesn't matter
  const classes = useStyles();
  const classesBase = useStylesBase();

  // Order doesn't matter
  const className = clsx(classes.root, classesBase.root)

  // color: red 🔴 wins.
  return <div className={className} />;
}

我相信有很多类似的库，所以选择一个你觉得不错的库。

并且可以自己实现，参考本期示例

function combineStyles(...styles) {
  return function CombineStyles(theme) {
    const outStyles = styles.map((arg) => {
      // Apply the "theme" object for style functions.
      if (typeof arg === 'function') {
        return arg(theme);
      }
      // Objects need no change.
      return arg;
    });

    return outStyles.reduce((acc, val) => Object.assign(acc, val));
  };
}

export default combineStyles;

希望这个答案能找到你。

其它你可能感兴趣的问题
上一篇对于包装图像而不是文本的按钮， event.target.value 未定义 下一篇MobX：由于启用了严格模式，因此不允许在不使用操作的情况下更改（观察到的）可观察值