Update CSS of React-Calendly integration in react

Question

I want to modified the CSS of Inline Widget React Calendly. I use React Styled Component Wrapper, Frame React Component and DOM javascript but it is not updating the design like i want to remove/hide shadow, timezone, update background of date etc.

import React, { useEffect } from 'react';
import { useCalendlyEventListener, InlineWidget } from "react-calendly";
import styled from 'styled-components';
import Frame, { useFrame } from 'react-frame-component';
// export const Wrapper = styled.div`
// .cp5dqoq {
//     display: none;
//     visibility: hidden;
//   }
// `
const Calendar = () => {
    return (
        <>
                                <InlineWidget
                                        id="calendarFrame"
                                        frameBorder="0"
                                        scrolling="no"
                                        height="900px"
                                        url={url} />
        </>
    )
}
export default Calendar

React Styled Components, Javascript DOM, React Frame COmponent.I just wanted to modified the css

Answer 1

react-calendly renders the scheduling page using an iframe. As a result, you cannot change the default Calendly css styles within the iframe.

To customize these styles you would need to use a tool such as cloakist, which loads the Calendly scheduling form outside of an iframe. An example of how to customize the branding can be found here:

https://youtu.be/jZlSy06L_UM