在react中更新React-Calendly集成的CSS

Question

我想修改Inline Widget React Calendly的CSS。我使用 React Styled Component Wrapper、Frame React Component 和 DOM javascript，但它并没有像我想删除/隐藏阴影、时区、更新日期背景等那样更新设计。

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 样式组件，Javascript DOM，React Frame COmponent。我只是想修改 css

Answer 1

react-calendly

使用 iframe 呈现调度页面。因此，您无法更改 iframe 内的默认 Calendly css 样式。

要自定义这些样式，您需要使用 cloakist 等工具，它会在 iframe 外部加载 Calendly 调度表单。可以在此处找到如何自定义品牌的示例：

https://youtu.be/jZlSy06L_UM