💄(frontend) stylegrommet components

[AntoLC]

Components to have the full feature of Grommet combine with the css feature of styled-components.

Problem

As it is now, we have to extend a Grommet component (Box / Text ...) with styled-component every time we need a small css property, we have as well to extend an interface if we want to pass props, on the big pictures it takes time. We can use the inline style directly on the component but it is not best way to do it.

Proposal

When we need extra css property:

• Small extension of Grommet components with a css property to add directly our css.

Example of use:

 <Box
    width="15px;"
    css={`
      box-shadow: 0px 0px 4px 0px rgba(104, 111, 122, 0.3);
      transition: margin-left 0.6s;
      ${isMenuOpen ? `` : `transform:  translateX(-15px);`}
   `}
  >

Solve

• [x] Don't need to think about component naming
• [x] Less code: Don't have to create new component from styled component
• [x] Easy access to parent components variable
• [x] No use of inline style