diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index 1e1714ab935371..2a0fc55f7defe7 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -44,8 +44,8 @@ function MediaPlaceholder( props ) {
 		multiple,
 		value = [],
 		children,
-		customEmptyStateContainer,
-		customEmptyStateTitle,
+		customEmptyStateContainerStyles,
+		customEmptyStateTitleStyles,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -94,7 +94,7 @@ function MediaPlaceholder( props ) {
 	}
 
 	const emptyStateTitleStyle = getStylesFromColorScheme(
-		[ styles.emptyStateTitle, props.customEmptyStateTitle ],
+		[ styles.emptyStateTitle, customEmptyStateTitleStyles ],
 		styles.emptyStateTitleDark
 	);
 	const addMediaButtonStyle = getStylesFromColorScheme(
@@ -137,7 +137,7 @@ function MediaPlaceholder( props ) {
 		styles.appenderDark
 	);
 	const emptyStateContainerStyle = getStylesFromColorScheme(
-		[ styles.emptyStateContainer, props.customEmptyStateContainer ],
+		[ styles.emptyStateContainer, customEmptyStateContainerStyles ],
 		styles.emptyStateContainerDark
 	);
 
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 44f45b720831a6..3c55ea7ec81279 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -346,10 +346,10 @@ const Cover = ( {
 		return (
 			<View>
 				<MediaPlaceholder
-					customEmptyStateContainer={
+					customEmptyStateContainerStyles={
 						styles.mediaPlaceholderEmptyStateContainer
 					}
-					customEmptyStateTitle={
+					customEmptyStateTitleStyles={
 						styles.mediaPlaceholderEmptyStateTitle
 					}
 					icon={ placeholderIcon }
@@ -362,7 +362,12 @@ const Cover = ( {
 				>
 					<View style={ styles.colorPaletteWrapper }>
 						<ColorPalette
-							customStyles={ styles }
+							customColorIndicatorStyles={
+								styles.paletteColorIndicator
+							}
+							customIndicatorWrapperStyles={
+								styles.paletteCustomIndicatorWrapper
+							}
 							setColor={ setColor }
 							onCustomPress={ noop }
 							defaultSettings={ coverDefaultPalette }
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index 35150a13c9f60e..3db3aa2824af07 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -80,21 +80,14 @@
 	min-height: 58px;
 }
 
-.contentContainer {
-	flex-direction: row;
-	padding: 0 $grid-unit-20;
-}
-
-.container {
-	padding-bottom: $grid-unit-20;
-}
-
-.colorIndicator {
+.paletteColorIndicator {
+	margin-top: 0;
+	margin-bottom: 0;
 	width: 32px;
 	height: 32px;
 }
 
-.customIndicatorWrapper {
+.paletteCustomIndicatorWrapper {
 	flex-direction: row;
 	align-items: center;
 	width: 32px;
@@ -108,4 +101,4 @@
 .mediaPlaceholderEmptyStateTitle {
 	margin-top: 4;
 	margin-bottom: 16;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index f85eac5ce25672..8b1b5f2646037f 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -21,7 +21,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import defaultStyles from './style.scss';
+import styles from './style.scss';
 import ColorIndicator from '../color-indicator';
 import { colorsUtils } from '../mobile/color-settings/utils';
 import { performLayoutAnimation } from '../mobile/layout-animation';
@@ -42,10 +42,9 @@ function ColorPalette( {
 	shouldEnableBottomSheetScroll,
 	shouldShowCustomIndicatorOption = true,
 	shouldShowCustomLabel = true,
-	customStyles,
+	customColorIndicatorStyles,
+	customIndicatorWrapperStyles,
 } ) {
-	const styles = customStyles === undefined ? defaultStyles : customStyles;
-
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
 		'linear-gradient(240deg, rgba(0,255,0,.8), 0%, rgba(0,255,0,0) 70.71%)',
@@ -228,7 +227,10 @@ function ColorPalette( {
 								color={ color }
 								isSelected={ isSelected( color ) }
 								opacity={ opacity }
-								style={ styles.colorIndicator }
+								style={ [
+									styles.colorIndicator,
+									customColorIndicatorStyles,
+								] }
 							/>
 						</Animated.View>
 					</TouchableWithoutFeedback>
@@ -236,7 +238,10 @@ function ColorPalette( {
 			} ) }
 			{ shouldShowCustomIndicator && (
 				<View
-					style={ styles.customIndicatorWrapper }
+					style={ [
+						styles.customIndicatorWrapper,
+						customIndicatorWrapperStyles,
+					] }
 					onLayout={ onCustomIndicatorLayout }
 				>
 					<View style={ verticalSeparatorStyle } />
@@ -246,12 +251,20 @@ function ColorPalette( {
 						accessibilityState={ { selected: isSelectedCustom() } }
 						accessibilityHint={ accessibilityHint }
 					>
-						<View style={ styles.customIndicatorWrapper }>
+						<View
+							style={ [
+								styles.customIndicatorWrapper,
+								customIndicatorWrapperStyles,
+							] }
+						>
 							<ColorIndicator
 								withCustomPicker={ ! isGradientSegment }
 								color={ customIndicatorColor }
 								isSelected={ isSelectedCustom() }
-								style={ styles.colorIndicator }
+								style={ [
+									styles.colorIndicator,
+									customColorIndicatorStyles,
+								] }
 							/>
 							{ shouldShowCustomLabel && (
 								<Text style={ customTextStyle }>