3

问题

如果我错了（或滥用映射），请纠正我，但我对变体组样式如何/为什么在外观之间合并有疑问？

我找不到太多关于这种特定行为的文档，也没有深入研究源代码，但我认为在外观/变体之间隔离样式将意味着更少的重复和更紧凑、更易于维护的样式定义。

以默认的 Button 映射为例

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小猫和伊娃版

@eva-design/eva@5.0.0

@ui-kitten/components@5.0.0

4

0 回答 0