React：如何组合 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 和 sharedStyles 组合成一个类变量。

当然可以像下面这样使用

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

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

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;

希望这个答案对您有所帮助。

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

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

javascript

css

styles

reactjs

material-ui