如何在同一个样式表中重用样式

Question

我正在使用 React Native，并且我想在同一个样式表中重用样式。我的风格如下：

buttonContained: {
        borderRadius: 8,
        backgroundColor: Colors.primary,
        padding: 15,
        height: 48,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonOutlined: {
        padding: 15,
        borderRadius: 8,
        height: 48,
        borderColor: Colors.primary,
        borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },

但是，我注意到这两个按钮具有相同的样式，并且我将创建的其他按钮将使用类似的样式。我想重用样式，因为如果默认样式发生变化，我只需要在一处修改它。

这是我想做的一个例子：

export const globalStyles = StyleSheet.create({
      buttonDefault: {
        borderRadius: 8,
        padding: 15,
        height: 48,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContained: {
        **(reuse defaultStyle here)**
        backgroundColor: Colors.primary,
    },
    buttonOutlined: {
        **(reuse defaultStyle here)**
        borderColor: Colors.primary,
        borderWidth: 1,
    },
})

有人知道如何做到这一点吗？”

Answer 1

你可以实现你想要的，但以不同的方式，你尝试过吗？

<ButtonOne style={[styles.buttonDefault, styles.buttonContained]} />

<ButtonTwo style={[styles.buttonDefault, styles.buttonOutlined]} />

或者这个：

export const globalStyles = StyleSheet.create({
    buttonDefault: {
        borderRadius: 8,
        padding: 15,
        height: 48,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContained: {
        ...globalStyles.buttonDefault,
        backgroundColor: Colors.primary,
    },
    buttonOutlined: {
        ...globalStyles.buttonDefault,
        borderColor: Colors.primary,
        borderWidth: 1,
    },
});