How can I override variant style by another variant of my button component?

[iideviibrahim]

I've created a custom Button component that looks like the following:

`import React from 'react';
import { Box } from '../layout/Box';
import { Text } from '../Text';
import {
SpacingProps,
VariantProps,
BorderProps,
createRestyleComponent,
createVariant,
spacing,
LayoutProps,
backgroundColor,
BackgroundColorProps,
border,
color,
ColorProps,
opacity,
OpacityProps
} from '@shopify/restyle';
import theme, { Theme } from '@/theme';

type btnCustomProps = SpacingProps &
LayoutProps &
BackgroundColorProps &
BorderProps &
OpacityProps &
VariantProps<Theme, 'buttonVariants', 'variant'> &
VariantProps<Theme, 'buttonColor', 'colorVariant'>;

type Props = btnCustomProps & {
title: string | number;
};

const btnVariant = createVariant({ themeKey: 'buttonVariants', property: 'variant' });
const btnColorVariant = createVariant({ themeKey: 'buttonColor', property: 'colorVariant' });
const CustomBtn = createRestyleComponent<btnCustomProps, Theme>([btnVariant, btnColorVariant]);

const Button = (props: Props) => {
const { title, ...restProps } = props;
return (

<CustomBtn {...restProps}>
{title}


);
};
export default Button;
`

I'm trying to use multiple variants in my Input component, for example:
<Button title={'Success'} variant="outline" colorVariant="secondary" />

**So while I apply outline as variant, then It will override the background color of buttonColor variant. But It's not changing the background color **

Below Button styles which we are using:
export const buttonColor = { defaults: { backgroundColor: 'primary', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'primary' }, primary: { backgroundColor: 'primary', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'primary' }, secondary: { backgroundColor: 'secondary', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'secondary' }, success: { backgroundColor: 'success', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'success' }, danger: { backgroundColor: 'failure', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'failure' }, warning: { backgroundColor: 'warning', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1, borderColor: 'warning' } }; export const buttonVariants = { defaults: { backgroundColor: 'warning', alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm' }, solid: { alignSelf: 'center', paddingHorizontal: 'md', paddingVertical: 'sm', borderRadius: 'rounded-sm', borderWidth: 1 }, outline: { borderWidth: 1, backgroundColor: 'transparent' }, link: { borderColor: 'transparent', backgroundColor: 'transparent' } };

How can I override the colorVariant styles by applying the variant ?
Thanks in advance for your help! 🙏