0

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

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

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

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

4

1 回答 1

3

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

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

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

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

对于图层覆盖背景颜色的具体问题，该组件没有组件道具来启用覆盖主题道具，因此在这种情况下，您应该使用 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”主题），这允许为应用程序的特定部分分配临时主题。

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

于 2021-03-02T18:32:25.040 回答