LUM3011: <style> as the root or in an expression

Severity: error · Category: styles (3xxx)

Reported by: the scanner and the compiler.

#What it means

A block is not an element: it renders nothing and only attaches CSS to its scope. `return

`, `() => ` or `const css = ` therefore have no

element to attach to. (For tools, the block is masked to null so parsing continues.)

#Example

export function Theme() {
  return (
    <style>
      :root { --accent: tomato; }
    </style>
  );
}

#How to fix it

Put the block inside the element the component returns, at the file top level, or make it global in a layout:

<style global>
  :root { --accent: tomato; }
</style>

#Related

• Styles