javascript - react : How to combine each multiple styles marked in Material-UI

Question

我有两种风格。

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

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

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 和 shareStyles 组合到一个类变量中。

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

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

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

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

有什么好的方法可以结合起来吗？

Answer 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} />;
}

我确信有很多类似的库，因此请选择您感觉良好的一个。

您也可以自行实现，引用this issue中的示例

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;

希望这个答案能让您满意。