Functions

deepMerge

A function that receives two theme objects and returns a theme object that includes both theme values. In case different styling are found for the same components on the two themes, the second argument theme will determine the styling.

import { deepMerge } from 'grommet/utils';

const myCustomTheme = deepMerge(grommet, {
  global: {
    colors: {
      brand: 'red',
    },
  },
});

const CustomPrimaryButton = () => (
  <Grommet theme={myCustomTheme}>
    <Box align="center" pad="large" gap="small">
      <Button primary label="deepMerge custom button" onClick={() => {}} />
    </Box>
    <Text>
      The Button font is taken from the grommet theme, while its
      brand color is taken from myCustomTheme.
    </Text>
  </Grommet>
);