Как изменить активный цвет границы втулки v2 FormField?

Я пытаюсь создать тему приложения с втулкой v2. Я использую Form и FormField из компонентов втулки для создания ящиков. Когда FormField активен, нижняя граница меняет цвет на значение по умолчанию accent-1, и я не могу изменить этот цвет границы.

У меня есть файл theme.js, который я помещаю в свойство темы в компоненте. Все, что связано с темой, работает хорошо (цвета кнопок и т. Д.). Я пытался изменить цвет акцента-1, но в документации об этом не хватает.

в теме.js

export const theme = {
   global: {
      colors: {
         brand: colors.primary,
         text: colors.white
      },
      focus: {
         border: {
            color: colors.primary
         },
         accent: {
            1: "#EEEEEE"
         },
         borderBottom: colors.primary
      }
   },
}

Я ожидаю изменить этот цвет на серый, но это все еще цвет по умолчанию.


reactjs form-fields grommet border-color
person OMGImOut    schedule 19.06.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

Это работает:

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A',
      focus: '#0CA7D3' // added focus color
    }
  },
  formField: {
    label: {
      size: 'small'
    }
  }
}

Обратите внимание, что это может изменить цвет фокуса для других компонентов, поскольку это глобальный цвет.

Это не работает:

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A'
    }
  },
  formField: {
    label: {
      size: 'small'
    },
    colors: {
      focus: '#0CA7D3' // tried adding a colors property with a focus property inside of it
    }
  }
}

Исходный код

Глядя на исходный код компонента FormField, похоже, что они определяют borderColor следующим образом:

let borderColor;
if (focus && !normalizedError) {
  borderColor = 'focus';
} else if (normalizedError) {
  borderColor = (border && border.error.color) || 'status-critical';
} else {
  borderColor = (border && border.color) || 'border';
}

Вот ссылка на код компонента на Github: FormField.js

Обратите внимание в случае с normalizedError, как они используют border.error.color, которое является свойством объекта темы в Grommet. В случае с фокусом они устанавливают для свойства borderColor значение focus.

Кажется, компонент не поддерживает указание цвета фокуса для компонента FormField из объекта темы.

person Marcus Virginia    schedule 02.08.2019

arrow_upward
0
arrow_downward

Я использовал styled-components' extend вот так:

textInput: {
  extend: `
    background: ${ '#333333' }; // dark-1
    margin: 2px 0px;

    &:hover {
      background: ${ '#555555' }; // dark-2
    }

    &:focus {
      background: ${ '#555555' }; // dark-2
      color: ${ '#ffffff' };
    }

    &::placeholder {
      color: dark-5;
      font-style: italic;
      font-weight: 200;
    }
  `,
},
person Juan Lanus    schedule 21.10.2019

arrow_upward
0
arrow_downward

Вот пара идей о том, как управлять цветом фокуса в вашей теме:

  1. Определите свой собственный набор цветов на global.colors и выберите цвет из набора в качестве цвета фокуса:
const customTheme = {
  global: {
    colors: {
      deepBlue: "#003366",
      focus: "deepBlue",
    }
  }
};
  1. Измените объект цвета фокуса непосредственно на теме:
const customTheme = {
  global: {
    colors: {
      focus: "#000000"
    }
  }
};

Используйте следующую разметку с вашей customTheme, и вы должны увидеть изменение цвета фокуса соответствующим образом:

    <Grommet theme={customTheme}>
      <Box pad="small" gap="medium" width="medium">
        <TextInput placeholder="hi" />
        <Anchor href="">Anchor</Anchor>
        <Button label="Button" onClick={() => {}} />
      </Box>
    </Grommet>

Примечание: цвета люверсов также принимают темные/светлые объекты, подробнее здесь.

Пример живого рассказа о поведении фокуса люверса перейдите сюда.

person Shimi    schedule 07.07.2020