mcpField
S
studio-css-reset

studio-css-reset

github.com/remotion-dev设计与 UI68.6k483 次安装今天更新
代码仓库

关于 studio-css-reset

面向 Remotion Studio 贡献者的 CSS 指引技能，说明 `.css-reset` 如何作用于重置容器，以及嵌套元素为何需要显式设置样式。

主要功能

  1. 01说明重置容器的作用范围
  2. 02列出重置规则设置的属性
  3. 03解释后代元素的样式行为
  4. 04建议显式设置嵌套元素样式

适用场景

  1. 01设置重置容器内文本的样式
  2. 02设置 Studio UI 中 SVG 图形的样式
  3. 03排查父级样式未影响后代元素的原因

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remotion-dev/remotion --skill studio-css-reset

安装后在 Claude Code 中输入/studio-css-reset确认已加载。

附带文件agents/openai.yaml

详细介绍

Studio CSS 重置

Studio 使用 .css-reset 容器来限制用户样式对其 UI 的影响。打包器会在 packages/bundler/src/setup-environment.ts 中注入此规则：

.css-reset, .css-reset * {
  font-size: 16px;
  line-height: 1.5;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: transparent;
  box-sizing: border-box;
}

此规则适用于每个重置容器及其所有后代，但仅作用于所示属性。它不涵盖这些容器之外的元素，也不能阻止优先级更高的用户 CSS 规则生效。

必须遵循的规则

不要依赖此重置中某个属性的继承。每个后代都会获得自己的重置值，因此，仅设置父元素的样式不会影响嵌套文本或 SVG 图形。请在渲染该内容的元素上设置所需的值，或使用明确设置该后代样式的 CSS 选择器。

评论

支持 Markdown