studio-css-reset

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Studio CSS reset

Studio CSS 重置

Studio uses
.css-reset
containers to limit the effect of user styles on its UI. The bundler injects this rule in
packages/bundler/src/setup-environment.ts
:
css
.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;
}
The rule applies to each reset container and every descendant, but only to the properties shown. It does not cover elements outside those containers or prevent a stronger user CSS rule from winning.
Studio 使用
.css-reset
容器来限制用户样式对其 UI 的影响。bundler 会在
packages/bundler/src/setup-environment.ts
中注入以下规则:
css
.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 规则生效。

Must-follow rule

必须遵循的规则

Do not rely on inheritance for a property in this reset. Each descendant receives its own reset value, so styling a parent alone will not style nested text or SVG shapes. Set the needed value on the element that renders it, or use a CSS selector that explicitly styles that descendant.
不要依赖此重置中属性值的继承。每个后代元素都会获得独立的重置值,因此,仅设置父元素的样式不会为嵌套文本或 SVG 形状设置样式。请在实际渲染相应值的元素上设置所需属性,或使用明确限定该后代元素的 CSS selector。