Блог

Поправьте меня, если я ошибаюсь (или неправильно использую отображение), но у меня возник вопрос о том, как / почему стили группы вариантов объединяются между появлениями?

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

Возьмем, к примеру, отображение кнопок по умолчанию

 const theme = {
  appearances: {
    // The amount of code in filled.status is nice and compact
    filled: {
      mapping: { // ⬅ if i understand this correctly, mapping is like a "parent" style that applies to all variants?
        textFontFamily: "text-font-family",
        borderColor: 'transparent',
        textColor: '$color-text-basic',
        iconTintColor: '$color-text-basic',
      },
      variantGroups: {
        status: {
          primary: {
            backgroundColor: '$color-primary-500',
            state: {
              hover: {
                backgroundColor: '$color-primary-400',
              },
              focused: {
                backgroundColor: '$color-primary-600',
              },
              active: {
                backgroundColor: '$color-primary-600',
              },
              disabled: {
                backgroundColor: '$color-primary-transparent-300',
              },
            },
          }
        },
        size: { // ⬅ this is applied to all other appearances which is nice but ...
          tiny: { ...tinyStyles },
          small: { ...smallStyles },
          medium: { ...medStyles },
          large: { ...largeStyles },
        },
      },
    },
    outline: {
      mapping: {
        backgroundColor: 'transparent', // ⬅ I expected this be applied to all variantGroups under outline.*
      },
      variantGroups: {
        status: {
          primary: {
            backgroundColor: 'transparent', // ⬅ or even here, I expected this to be applied to all states under outline.primary
            borderColor: '$color-primary-500',
            textColor: '$color-primary-500',
            iconTintColor: '$color-primary-500',
            state: {
              hover: {
                backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
                borderColor: '$color-primary-400',
                textColor: '$color-primary-400',
                iconTintColor: '$color-primary-400',
              },
              focused: {
                backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
                borderColor: '$color-primary-600',
                textColor: '$color-primary-600',
                iconTintColor: '$color-primary-600',
              },
              active: {
                backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
                borderColor: '$color-primary-600',
                textColor: '$color-primary-600',
                iconTintColor: '$color-primary-600',
              },
              disabled: {
                backgroundColor: 'transparent', // ⬅ Instead, I have to repeatedly define them to override it from filled.primary
                borderColor: '$color-primary-transparent-300',
                textColor: '$color-primary-300',
                iconTintColor: '$color-primary-300',
              },
            },
          },
        },
      },
    },
  },
}

  

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

Версия UI Kitten и Eva

@eva-design/eva@5.0.0

@ui-kitten/components@5.0.0