Next.js中无法编辑或移除Calendly组件周围的白色边框

你遇到的白色边框是Calendly嵌入iframe自带的默认样式，和是否购买高级版无关——高级版负责Calendly内部界面定制，外层iframe的边框得自己通过CSS或直接修改iframe属性来移除。下面给你几种可行的解决方法：

方法1：全局CSS覆盖iframe样式 #

在Next.js的全局样式文件（比如app/globals.css）中添加以下代码，直接定位到Calendly的iframe并清除边框：

.calendly-inline-widget iframe {
  border: none !important;
}

方法2：直接用原生iframe嵌入（跳过react-calendly） #

如果react-calendly的封装限制了样式调整，不如直接使用原生iframe标签，手动控制所有样式：

'use client'
import React from "react";

const CalendlyInline = () => {
  return (
    <div style={{ 
      width: '100%', 
      height: '500px', 
      backgroundColor: "#090E34" 
    }}>
      <iframe 
        src="https://calendly.com/appointment/15mins"
        width="100%"
        height="100%"
        frameBorder="0"  // 直接设置iframe边框为0
        style={{ border: 'none' }}  // 双重保险确保边框清除
      ></iframe>
    </div>
  );
};

export default CalendlyInline;

方法3：基于react-calendly调整样式 #

如果你不想放弃react-calendly，可以在现有代码基础上，通过容器溢出隐藏+CSS定位内部iframe来解决：
先修改组件代码：

'use client'
import React from "react";
import { InlineWidget } from "react-calendly";

const containerStyle = {
    width: '100%',
    height: '500px',
    backgroundColor: "#090E34",
    overflow: 'hidden',  // 隐藏溢出的边框部分
    position: 'relative'
};

const CalendlyInline = () => {
  return (
    <div style={containerStyle}>
      <InlineWidget 
        url="https://calendly.com/appointment/15mins"
        styles={{ width: '100%', height: '100%' }}
      />
    </div>
  );
};

export default CalendlyInline;

再在全局CSS中添加：

div[class^="calendly-inline-widget"] iframe {
  border: none !important;
  position: absolute;
  top: 0;
  left: 0;
}

核心原理：Calendly嵌入组件本质是iframe，浏览器默认会给iframe添加1px灰色边框，只要将这个边框设为none就能解决问题。

内容的提问来源于stack exchange，提问作者Julia