Workspace 自定义多页签样式

再 Workspace 中设置多页签样式

基础使用方法

  <style>

  /* 页签整行样式以及背景色 */
  .react-editor-tabs-container{
    background-color: rgb(239 239 239);
  }

  /* 未选中页签样式 */
  .react-editor-tabs-container .tabs-container .tabs-item{

  }

  /* 已选中页签样式 */
  .react-editor-tabs-container .tabs-container .tabs-item.active{

  }

  /* 操作栏按钮样式以及背景色 */
  .react-editor-actions-container{
    background-color: rgb(239 239 239) !important;
  }

  </style>

把 以上内容作为环境变量配置到 Erda 启动 Workspace 的 INJECT_FOOTER 环境变量上即可

.react-editor-tabs-container // 多页签背景
.react-editor-tabs-container .tabs-container .tabs-item // 页签样式
.react-editor-tabs-container .tabs-container .tabs-item.active // 页签高亮样式
.react-editor-tabs-container .tabs-container .tabs-item .tab-content // 页签内容样式（可配合active状态来做不同样式）
.react-editor-tabs-container .tabs-container .tabs-item .tab-close // 关闭岩妞样式（可配合active状态来做不同样式）
.react-editor-tabs-container .custom-scrollbar-track // 溢出滚动条样式

.react-editor-actions-container // 多页签操作栏背景
.react-editor-actions-container .editor-action // 单个操作样式

.react-editor-tooltip // action 下拉框样式，具体样式覆盖请参照 nusi Menu 组件