CODEWITHSUNDEEP
reactjsgrommet
Varun Gupta
Varun Gupta

Reputation: 3112

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

I want to show a Layer in one place with black background. So, I use the below theme setting:

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

Now I want to add show another Layer where the background is transparent. How can I achieve that? I don't see a way to pass theme object to a component to change some theme parameters individually for a component.

The question is not limited to Layer. Same thing may apply to any other component that can be customized using some theme settings but how can I specify such settings individually for a component.

Upvotes: 0

Views: 559

Answers (1)

Shimi
Shimi

Reputation: 1218

Great question, there are a few approaches & layers (pun intended) to answer this question, I'll try to cover it all.

The idea of having theme props is to keep your application unified and consistent across the application for a better user experience. So it is usually best to leverage the consistency that your theme uses and not override it.

That being said, in Grommet, we understand that in some cases callers would like to adjust theme props per instance, e.g. make the layer's overlay mostly 'black' but change its color per specific instance in the application as you suggested.

In some cases, the answer is to leverage the component's props. Inline component props will override the theme properties so whenever component props are available for the override, try to leverage those. For example, if the requirement was to override the container's background color that is coming from the theme, you could have overridden it easily by adding the background="transparent" prop to the component and it would have done the trick.

To your specific question of Layer's overlay background color, the component does not have component props to enable overriding the theme props, so in this case, you should use ThemeContext, which allows you to switch a theme per section of the application. Let's say you have an internal page on your app that is using a different theme than your overall application, here is an idea of how to style the page with its own unique theme-ing:

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"));

In this example code, the code that is inside the ThemeContext will use the ThemeContext new theme value, and the code that is outside ThemeContext will use the theme that is assigned on the Grommet theme prop (in this case 'grommet' theme), this allows temporary theme assignment for specific parts of the application.

This solution is mostly generic for any theme props you'd like to override in the future, and not specifically to Layer. For clean code and behavior, try to use this approach only when component props are not available and the designs firmly suggest changing a theme property.

Upvotes: 3

Related Questions