studio-css-reset

name	studio-css-reset
description	Diagnose and fix Remotion Studio UI bugs caused by the global CSS reset. Use when nested text or SVG icons have incorrect color, typography, sizing, hover states, or truncation in packages/studio.

Studio CSS Reset

Remotion Studio's reset targets both the reset container and every descendant. A child does not necessarily inherit the visual styles of its parent: the reset may give that child its own computed value instead.

Diagnose the affected element

Inspect the element that actually paints the pixels, not only its parent:

• For text, inspect the span, div, or other text wrapper.
• For SVG icons, inspect the painted path, circle, or rect as well as the outer svg.
• Compare computed styles in every relevant state: idle, hovered, selected, focused, and disabled.
• Check whether the value comes from an inline style, SVG presentation attribute, inheritance, or the .css-reset, .css-reset * rule.

Apply explicit local styles

Do not assume that styling the row, button, or outer SVG is enough.

For text wrappers, explicitly set the visual properties the component depends on, such as:

const labelStyle: React.CSSProperties = {
	fontFamily: 'inherit',
	fontSize: 13,
	lineHeight: 'normal',
	color: 'inherit',
};