如何在 React Native 中覆盖父 styles

Question

I have A container class, and i put custom made components in it with respect to container's state. In below component i defined width as width: '100%' however, in container class i have a stylesheet variable where i give paddingLeft: 20 paddingRight: 20 in order to make stateless components more shaped. this is one my stateless component:

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>
    );
};

this is how i used above component.

            <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>

but there is one thing i could not accomplish, i want my <Seperator/> not effected by styles.flatListContainer 's paddingLeft and paddingRight styles.

Any help will be appreciated, thanks.

Answer 1

Move the padding to ListViewItem's margin. assume that you can't edit style flatListContainer for some reasons and don't want to set style in 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>