diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index 0f7d3696cce9..e536904e4da3 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'underscore';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 import Text from '../../Text';
@@ -9,7 +10,7 @@ const MentionHereRenderer = (props) => (
         <Text
             // Passing the true value to the function as here mention is always for the current user
             color={StyleUtils.getMentionTextColor(true)}
-            style={StyleUtils.getMentionStyle(true)}
+            style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(true)]}
         >
             <TNodeChildrenRenderer tnode={props.tnode} />
         </Text>
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index dd99c8fa530f..81f723e66aef 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -41,7 +41,7 @@ const MentionUserRenderer = (props) => {
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
                     color={StyleUtils.getMentionTextColor(isOurMention)}
-                    style={StyleUtils.getMentionStyle(isOurMention)}
+                    style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention)]}
                     onPress={() => showUserDetails(loginWhithoutLeadingAt)}
                 >
                     <TNodeChildrenRenderer tnode={props.tnode} />