如何在 React Native 中覆盖父样式答案

【问题标题】：How to override parent styles in React Native如何在 React Native 中覆盖父样式
【发布时间】：2019-10-16 08:33:27
【问题描述】：

我有一个容器类，我根据容器的状态将定制的组件放入其中。在下面的组件中，我将宽度定义为 width: '100%' 但是，在容器类中，我有一个样式表变量，我在其中给出 paddingLeft: 20 paddingRight: 20 以使无状态组件更具形状。这是我的无状态组件之一：

const Seperator = props => {
    stt = {
        backgroundColor: props.backgroundColor,
    }
    textstt = {
        color: props.backgroundColor == colors.BLACK
            ? colors.WHITE
            : colors.BLACK
    }
    console.log('I am in seperator, backgroundcolor: ', props.backgroundColor, 'text', props.text, 'textcolor: ', textstt);
    return (
        <View style={[styles.container, stt]}>
            <Text style={[styles.text, textstt]}>{props.text}</Text>
        </View>
    );
};

这就是我使用上述组件的方式。

            <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? <View style={styles.flatListContainer}>
                            <ListViewItem
                                categoryName={currentCategory.categoryName}
                                iconName={currentCategory.categoryIcon}
                                showBorder={false}
                                key={currentCategory.categoryId}
                                categoryId={currentCategory.categoryId}
                                inNewAdScreen={false}
                            />
                            <Seperator
                                backgroundColor={colors.BLACK}
                                text={'Ilan Turu'}
                            />
                            {
                                currentCategory.subCategories.map((subc) => (
                                    <SubCategoryItem
                                        text={subc.subCategoryName}
                                        key={subc.subCategoryId}
                                        showBorder={true}
                                    />
                                ))

                            }
                        </View>
                        : null
                    }
                </View>
            </NewAdHoc>

但有一件事我无法完成，我希望我的<Seperator/> 不受styles.flatListContainer 的paddingLeft 和paddingRight 样式的影响。

任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript reactjs react-native frontend

【解决方案1】：

将内边距移动到 ListViewItem 的边距。假设您由于某些原因无法编辑样式 flatListContainer 并且不想在 ListViewItem 中设置样式。

<NewAdHoc contentText={'Kategori Secimi'} onBackPress={this.handleBackPress} showContentText={false}>
    <View style={styles.container}>
        {currentCategory !== null ? (
            <View style={{ ...styles.flatListContainer, paddingLeft: undefined, paddingRight: undefined }}>
                <View style={{ marginHorizontal: 20 }}>
                    <ListViewItem
                        categoryName={currentCategory.categoryName}
                        iconName={currentCategory.categoryIcon}
                        showBorder={false}
                        key={currentCategory.categoryId}
                        categoryId={currentCategory.categoryId}
                        inNewAdScreen={false}
                    />
                </View>
                <Seperator backgroundColor={colors.BLACK} text={'Ilan Turu'} />
                {currentCategory.subCategories.map((subc) => (
                    <SubCategoryItem text={subc.subCategoryName} key={subc.subCategoryId} showBorder={true} />
                ))}
            </View>
        ) : null}
    </View>
</NewAdHoc>

【讨论】：

您好，您的回答我得到了我想要的。感谢帮助。干杯。