Question

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

Answer 1

没有支持索环。

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

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

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

Answer 2

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

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如何修改组件的大小？

2 个答案: