1

I try to use the components from the Grommet UI with ReactJs. I would like to understand if there is a way to use an existing Grommet theme in order to have smaller components (text input, number input, datetime) or I have to customize by overriding the components dimentions ?

Vicking
  • 553
  • 6
  • 15

2 Answers2

1

Create Template component for each different element and set properties as needed in template. For example, below component set the height of the button by passing props.

import styled from 'styled-components';
import { Button } from 'grommet';

export const Button = styled(BaseButton)`

${props => props.height && `
    height: ${props.height};
`}
`;

And in new component import it and pass props as needed: 

<Button secondary fill height="auto" type="submit">
 Log In
</Button>
Ishan Patel
  • 5,571
  • 12
  • 47
  • 68
0

No grommet supported way.

Yeah there is not a easy way to reduce the components size. Just some containers and icons have the attribute size that can have a shirt-sized dimension xsmall small medium large etc.

But if it is of help I found handy to modify the size through styles:

<GrommetComponent style={{width:'100%', height:20}}/>
Marco Medrano
  • 2,530
  • 1
  • 21
  • 35
  • Thanks, the proposition works. Just one small problem with the svg is used as for the select fileds. – Vicking Jun 14 '17 at 15:24
  • In addition to the "shirt sizes" some components can handle a 'string' prop, which can be something like '222px' or other CSS size. – Juan Lanus Oct 21 '19 at 13:43