为层或索环中的任何其他组件指定不同的主题变量

问题描述

我想在一个带有 Layer 背景的地方显示一个 black。所以，我使用以下主题设置：

    layer: {
      overlay: {
        background: 'black'
      }
    }

现在我想添加显示另一个Layer，其中背景是transparent。我怎样才能做到这一点？我没有看到将 theme 对象传递给组件以单独更改组件的某些主题参数的方法。

问题不限于Layer。同样的事情可能适用于可以使用某些主题设置进行自定义的任何其他组件，但我如何为组件单独指定此类设置。

解决方法

好问题，有几个方法和层次（双关语）可以回答这个问题，我会尽量涵盖所有内容。

拥有主题道具的想法是让您的应用程序在用户体验方面保持统一和一致。因此，通常最好保持您的主题使用的一致性，而不是覆盖它们。

话虽如此，在 Grommet 中，我们知道在某些情况下调用者希望调整每个实例的主题道具，例如使图层的覆盖层大部分为“黑色”，但根据您的建议更改应用程序中每个特定实例的颜色。

在某些情况下，答案是利用组件的 props。内联组件道具将覆盖主题属性，因此只要组件道具可用于覆盖，请尝试利用它们。例如，如果需要覆盖来自主题的容器的背景颜色，您可以通过向组件添加 background="transparent" 属性轻松覆盖它，它就可以解决问题。

对于图层叠加背景颜色的具体问题，该组件没有组件道具来启用覆盖主题道具，因此在这种情况下，您应该使用 ThemeContext，它允许您在应用程序的每个部分切换主题。假设您的应用程序内部页面使用的主题与整个应用程序不同，这里是如何设置样式的想法具有自己独特主题的页面：

import React,{ useState } from "react";
import { render } from "react-dom";

import { grommet } from "grommet/themes";
import { Box,Button,Layer,ThemeContext,Grommet } from "grommet";

export const App = () => {
  const [show,setShow] = useState();
  return (
    <Grommet theme={grommet} full>
      <Box align="center" justify="center" fill>
        <ThemeContext.Extend
          value={{
            layer: {
              overlay: {
                background: "red"
              }
            }
          }}
        >
          <Button label="show" onClick={() => setShow(true)} />
          {show && (
            <Layer
              onEsc={() => setShow(false)}
              onClickOutside={() => setShow(false)}
            >
              <Button label="close" onClick={() => setShow(false)} />
            </Layer>
          )}
        </ThemeContext.Extend>
      </Box>
    </Grommet>
  );
};

render(<App />,document.getElementById("root"));

在此示例代码中，ThemeContext 内部的代码将使用 ThemeContext 新主题值，ThemeContext 外部的代码将使用分配给 Grommet 主题道具的主题（在本例中为“grommet”主题） )，这允许为应用程序的特定部分分配临时主题。

此解决方案主要适用于您将来想要覆盖的任何主题道具，而不是专门用于图层。为了保持代码和行为清晰，请仅在组件 props 不可用或设计强烈建议更改主题属性时才尝试使用此方法。

grommet reactjs reactjs