Grommet UI, как изменить размер компонентов?

Я пытаюсь использовать компоненты пользовательского интерфейса Grommet с ReactJs. Я хотел бы понять, есть ли способ использовать существующую тему Grommet, чтобы иметь меньшие компоненты (текстовый ввод, ввод чисел, дату и время), или мне нужно настроить, переопределив размеры компонентов?


reactjs themes grommet
person Vicking    schedule 13.06.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Никакая втулка не поддерживается.

Да, нет простого способа уменьшить размер компонентов. Только у некоторых контейнеров и значков есть атрибут size, который может иметь размер рубашки xsmall small medium large etc..

Но если это поможет, мне было удобно изменить размер с помощью стилей:

<GrommetComponent style={{width:'100%', height:20}}/>
person Marco Medrano    schedule 13.06.2017
comment
Спасибо, предложение работает. Только одна небольшая проблема с svg используется как для выбранных полей. - person Vicking; 14.06.2017
comment
В дополнение к размерам рубашки, некоторые компоненты могут обрабатывать реквизит «string», который может быть, например, «222px» или другим размером CSS. - person Juan Lanus; 21.10.2019

arrow_upward
1
arrow_downward

Создайте компонент шаблона для каждого отдельного элемента и задайте необходимые свойства в шаблоне. Например, ниже компонент устанавливает высоту кнопки, передавая реквизиты.

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>
person Ishan Patel    schedule 05.05.2019