使用 ThemeProvider 时，我们如何在同一个 DOM 元素上使用两个主题？

Posted 2023-02-22

【中文标题】使用 ThemeProvider 时，我们如何在同一个 DOM 元素上使用两个主题？

【英文标题】：How do we use two themes on the same DOM element when using a ThemeProvider?

【发布时间】：2020-09-26 18:54:47

【问题描述】：

<ThemeProvider theme=theme>

我正在使用主题提供程序，我想在同一个 DOM 元素上使用两个主题。

style=theme.flexRowLeft

我想同时使用两个主题，但是现在我只能使用一个元素，我不知道该怎么做。

const theme = createMuiTheme(
  flexRow: 
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  ,
  justifyRight: 
    justifyContent: "right",
  ,
);

如何结合使用 flexRow 和 justifyRight？

我正在使用 Material-UI 的主题提供程序。

【问题讨论】：

使用 clsx (import clsx from clsx) 组合多个类

我假设您使用的是 useStyles 或类似的东西？

你试过ClassNames库来组合类吗？

@SelvaS 据我所知，类名比 clsx 差

【参考方案1】：

As suggested here

假设您通过功能组件中的 useTheme 挂钩获得了主题：

const theme = useTheme()

你可以试试字符串插值：

<div className=`$theme.flexRow $theme.justifyRight`/>

总之，例如：

const someComponent = props => 
   const theme = useTheme();
   return(<div className=`$theme.flexRow $theme.justifyRight`/>);

请注意，您应该使用 className 属性，而不是样式！

【讨论】：

如何同时使用主题和makeStyles类？

我们所做的是将主题从 useTheme 钩子传递给 makeStyles 函数，这就是 makeStyles “知道”您正在处理的当前主题而不是 MUI 默认主题的方式

【参考方案2】：

在一个文件中，您可以创建带有主题的文件，例如 theme.js 你放在哪里：

export const theme = createMuiTheme(
  flexRow: 
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  ,
  justifyRight: 
    justifyContent: "right",
  ,
);

当您想在功能组件中使用它时，您可以编写如下内容：

import clsx from "clsx";
import  makeStyles  from "@material-ui/core/styles";

const myStyles = makeStyles(theme => (
    AA: 
        display: theme.flexRow.display,
        flexDirection: theme.flexRow.flexDirection,
        alignItems: theme.flexRow.alignItems
    ,
    BB: 
        justifyContent: theme.justifyRight.justifyContent
    
), name: "StyleNameVisibleInCss");

function myFunctionalComponent() 
    const classes = myStyles();
    return (
        <div className=clsx(classes.AA, classes.BB)> Some text </div>
    )

【讨论】：

等等，如果你想使用所有的 flexRow 主题而不需要分配每个单独的属性怎么办？