Grommet UI如何修改组件的大小？

Question

我尝试将 Grommet UI 中的组件与 ReactJs 一起使用。我想知道是否有一种方法可以使用现有的 Grommet 主题来获得更小的组件（文本输入、数字输入、日期时间），或者我必须通过覆盖组件尺寸来进行自定义？

Answer 1

没有索环支持方式。

是的，没有一种简单的方法可以减小组件的尺寸。只有一些容器和图标具有属性 size，可以有衬衫大小的尺寸 xsmall small medium large etc.

但如果有帮助，我发现通过样式修改大小很方便：

<GrommetComponent style={{width:'100%', height:20}}/>

Answer 2

为每个不同的元素创建模板组件，并根据需要在模板中设置属性。例如，下面的组件通过传递 props 来设置按钮的高度。

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

export const Button = styled(BaseButton)`

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

并在新组件中导入它并根据需要传递道具：

<Button secondary fill height="auto" type="submit">
 Log In
</Button>

Grommet UI如何修改组件的大小？

Grommet UI how to modify the size of the components?

themes

reactjs

grommet