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

但是我想把类和sharedClass组合成一个常量，比如

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

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

Answer 1

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

参考材料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} />;
}

我相信有很多类似的libs，所以选择一个你感觉良好的。

您可以自己实现，请参阅本期中的示例

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;

希望这个答案能帮你找到答案。