Можно ли стилизовать react-компонент на классах, но с использованием styled-components?

Компонентом является модальное окно с использованием react-modal, код с использованием TypeScript. Стили также импортированы в модуль компонента.

import Modal from 'react-modal';
import {Title, ImageWrapper, Container, Message, Actions, Close} from './info-modal.style';

interface IInfoModalProps {
  image?: string
  title?: string
  message?: string
  actions?: string
}

/**
 * Info Modal
 * @remarks
 * Modal window for different kind of information
 * @returns JSX.Element
 */
export default function InfoModal(props: IInfoModalProps): JSX.Element {
  const {image, title, message, actions} = props;
  const [modalIsOpen, setIsOpen] = useState(true);

  /**
   * Close Modal
   * @remarks
   * Function to close informational modal
   * @returns JSX.Element
   */
  function handleModalClose() {
    setIsOpen(false);
  }
  return (
    <Modal
      isOpen={modalIsOpen}
      shouldCloseOnOverlayClick
      shouldCloseOnEsc
      onRequestClose={() => {
        setIsOpen(false);
      }}
      image={image}
      title={title}
      message={message}
      style={{
        overlay: {
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(4, 13, 20, 0.6)',
        },
        content: {
          top: '50%',
          width: '600px',
          height: '469px',
          left: '50%',
          right: 'auto',
          bottom: 'auto',
          marginRight: '-50%',
          transform: 'translate(-50%, -50%)',
          overflow: 'visible',
        },
      }}
    >
      <Close onClick={handleModalClose} />
      <Container>
        <ImageWrapper>
          <img src={image} alt="smile"/>
        </ImageWrapper>
        <Title>{title}</Title>
        <Message>{message}</Message>
        <Actions onClick={handleModalClose}>{actions}</Actions>
      </Container>
    </Modal>

  );
}

import styled from 'styled-components';
import {PALETTE, FONT_SIZE} from '../../theme/theme';

export const Container = styled.div`
  text-align: center;
`;

export const Title = styled.h2`
  color: ${PALETTE.APPLE};
  font-size: ${FONT_SIZE.HEADER};
`;

export const ImageWrapper = styled.div`
  margin-top: 43px;
`;

export const Message = styled.p`
  font-size: ${FONT_SIZE.TEXT};
  padding: 0 11%;
  line-height: 150%;
`;

export const Actions = styled.button`
  margin-top: 70px;
  width: 234px;
  height: 44px;
  text-transform: uppercase;
  border: 1px solid ${PALETTE.WHITE};
  outline: none;
  color: ${PALETTE.WHITE};
  background: #98A1AF;
  border-radius: 3px
`;


export const Close = styled.span`
  position: absolute;
  right: -40px;
  top: -22px;
  width: 32px;
  height: 32px;
  :before, :after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 24px;
    border-radius: 5px;
    width: 5px;
    background: ${PALETTE.WHITE};
  }
  :before {
    transform: rotate(45deg);
  }
  :after {
    transform: rotate(-45deg);
  }
`;