How do I custom style Grommet components?

In the docs I see ThemeContext. Is this the way to style the components or is there a different way?

I’m just clear on how to add custom styles to all components and one single component.

[josiahdahl]

Hey @chancesmith, I’ve been working through some of these same questions and here’s a short overview of what I’ve found so far. I hope to contribute to the documentation a bit, as I find it lacking as well.

All of the available theme settings are listed here https://github.com/grommet/grommet/blob/master/src/js/themes/index.d.ts (auto-generated). Line 70 is where the component style descriptions start. Whatever you customize is merged with the base styles found here https://github.com/grommet/grommet/blob/master/src/js/themes/base.js using the generate function.

You can also find the theme options in the docs in the Theme section https://v2.grommet.io/button#theme

Once you’ve customized what you want, you simply pass the theme object to the Grommet component and the child components should inherit that styling.

Example

const theme = {
  button: {
      border: {
          width: '5px',
          radius: '0',
      },
      padding: {
          vertical: '1rem',
          horizontal: '2rem',
      };
  };

const CustomTheme =  () => (
  <Grommet theme={theme}>
    <Button>I have a border of 5px with no radius</Button>
  </Grommet>
);

// You might have the import the base theme, not sure...
const StandardTheme = () => (
  <Grommet>
    <Button>I'm the standard purple button with a radius</Button>
  </Grommet>
);

You can apply custom styles on a per-component basis by extending a component’s styles with styled-components.

import styled from 'styled-components`;
import { Button } from 'grommet';
const MyStyledButton = styled(Button)`
  font-weight: bold;
  background-color: #BADA55;
`;

const MyComponent = () => (
  <div>
    Press Button <MyStyledButton label="Press Me" />
  </div>
);

Some components accept an as prop - this doesn’t work when extending them with styled-components. See #2699

Let me know if that makes sense or if you have any other questions. I’m sure other people have more insight into it, but this is what I’ve found so far.

[ShimiSun]

@chancesmith long overdue response, thank you for your patient.

I think you raised a good design/dev question on what is the best practice for composing a theme; my personal preference is to leverage the theme to minimize internal prop styling/coding. I’ll use prop styling only when it can’t be done more generically with a theme.

Let’s say we have an app with the same Heading color cross the app (green), and there is only one place that requires Heading with a different color (red). In this case, the theme will dictate the common color, (I’ll be using the extend styling since Heading doesn’t accept an explicit color object)

heading: {
    extend: `color: green`
  }

so the color prop won’t need to be explicit for every Heading component instance, it will stay as simple as <Heading />. The Heading component that requires a different color will be <Heading color='red' />. I think it is cleaner this way.

A little more advanced example, let’s take the use case where there is only one section in the app that uses different Heading color but uses Heading with a different color (red) multiple times, in this case, instead of duplicating

<Heading color='red' />`
...
<Heading color='red' />`
...
<Heading color='red' />`
...

This may be a good candidate to use ThemeContext just for this scope of code that uses the red Heading color, and define the color on the ThemeContext Heading color, it will simplify the multiple Heading components with the explicit color prop, as simple as:

<Heading />`
...
<Heading />`
...
<Heading />`
...

I’ve created a quick sandbox that demonstrates the ⬆️ above behavior https://codesandbox.io/s/heading-theme-themecontext-lhevm

I think the theme is a super strong tool, and in order to leverage it properly one needs to ask the right questions - so you are doing it right buddy 😃 I hope I covered and answered your questions, I’m thinking of writing a blog on the theme’s best practices or something along those lines, so feel free to ask more questions if needed.