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

Question

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

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

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

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

Answer 1

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

拥有主题道具的想法是让您的应用程序在整个应用程序中保持统一和一致，以获得更好的用户体验。因此通常最好利用主题使用的一致性而不是覆盖它。

也就是说，在 Grommet 中，我们理解在某些情况下调用者希望调整每个实例的主题道具，例如使图层的叠加层大部分 'black' 但按照您的建议在应用程序中根据特定实例更改其颜色。

在某些情况下，答案是利用组件的道具。内联组件道具将覆盖主题属性，因此只要组件道具可用于覆盖，请尝试利用它们。例如，如果要求覆盖来自主题的容器背景颜色，您可以通过向组件添加 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' theme), 这允许为应用程序的特定部分临时分配主题。

此解决方案主要适用于您将来要覆盖的任何主题道具，而不是专门针对 Layer。为了干净的代码和行为，只有在组件属性不可用并且设计强烈建议更改主题时才尝试使用这种方法属性。

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

Specify different theme variables for a Layer or any other compoent in grommet

reactjs

grommet