fix: allow to override content style (#4707)

Author: lukewalczak

src/components/Card/CardActions.tsx

@@ -34,25 +34,33 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * export default MyComponent;
  * ```
  */
-const CardActions = (props: Props) => {
-  const { isV3 } = useInternalTheme(props.theme);
-  const justifyContent = isV3 ? 'flex-end' : 'flex-start';
+const CardActions = ({ theme, style, children, ...rest }: Props) => {
+  const { isV3 } = useInternalTheme(theme);
+
+  const justifyContent = (
+    isV3 ? 'flex-end' : 'flex-start'
+  ) as ViewStyle['justifyContent'];
+  const containerStyle = [styles.container, { justifyContent }, style];
 
   return (
-    <View
-      {...props}
-      style={[styles.container, props.style, { justifyContent }]}
-    >
-      {React.Children.map(props.children, (child, i) => {
-        return React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              compact: !isV3 && child.props.compact !== false,
-              mode:
-                child.props.mode ||
-                (isV3 && (i === 0 ? 'outlined' : 'contained')),
-              style: [isV3 && styles.button, child.props.style],
-            })
-          : child;
+    <View {...rest} style={containerStyle}>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
+        const compact = !isV3 && child.props.compact !== false;
+        const mode =
+          child.props.mode ??
+          (isV3 ? (index === 0 ? 'outlined' : 'contained') : undefined);
+        const childStyle = [isV3 && styles.button, child.props.style];
+
+        return React.cloneElement(child, {
+          ...child.props,
+          compact,
+          mode,
+          style: childStyle,
+        });
       })}
     </View>
   );