overrides

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { th } from '@pubsweet/ui-toolkit';
+import { th, override } from '@pubsweet/ui-toolkit';
 
 import CommentItemList from './CommentItemList';
 import CommentReply from './CommentReply';
@@ -33,12 +33,16 @@ const Wrapper = styled.div`
   font-family: ${th('fontInterface')};
 
   ${props => !props.active && inactive}
+
+  ${override('Wax.CommentWrapper')}
 `;
 
 const Head = styled.div`
   display: flex;
   justify-content: flex-end;
   padding: 8px 16px 0;
+
+  ${override('Wax.CommentHead')}
 `;
 
 const Resolve = styled.button`
@@ -55,6 +59,8 @@ const Resolve = styled.button`
   }
 
   ${props => props.isReadOnly && inactiveButton}
+
+  ${override('Wax.CommentResolve')}
 `;
 
 const StyledReply = styled(CommentReply)`

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { clone, uniqueId } from 'lodash';
+import { override } from '@pubsweet/ui-toolkit';
+
 import CommentItem from './CommentItem';
 
 const Wrapper = styled.div`
@@ -10,6 +12,7 @@ const Wrapper = styled.div`
   > div:not(:last-of-type) {
     margin-bottom: 16px;
   }
+  ${override('Wax.CommentItemWrapper')}
 `;
 
 const More = styled.span`
@@ -19,6 +22,8 @@ const More = styled.span`
   /* cursor: default; */
   display: inline-block;
   padding: 4px 8px;
+
+  ${override('Wax.CommentMore')}
 `;
 
 const CommentItemList = props => {