1

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

4

2 回答 2

1

为每个不同的元素创建模板组件，并根据需要在模板中设置属性。例如，下面的组件通过传递 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>
于 2019-05-05T21:01:32.723 回答
0

没有索环支持的方式。

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

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

<GrommetComponent style={{width:'100%', height:20}}/>
于 2017-06-13T13:21:54.137 回答