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

Posted 2023-02-22

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

【英文标题】：React: How to combine each multiple styles marked in Material-UI

【发布时间】：2020-06-28 01:20:21

【问题描述】：

我有两种风格。

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

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

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

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

【参考方案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;

希望这个答案能找到你。

【讨论】：

天啊，这正是我想要的。感谢您的出色回答和完美的解决方案！！对不起，你能告诉我'...styles'在react中是什么意思吗？

@SteveBack 在javascript中就是所谓的Spread_syntax