LUM3010: Misplaced <style> block

Severity: error · Category: styles (3xxx)

Reported by: the compiler (and the scanner for some positions).

#What it means

A block's scope comes from where it sits. Valid places are the module top level and inside a component's static JSX as a child of an intrinsic element or fragment, at any depth. Inside a component element (<Suspense>, <Card>), inside {…}, a conditional or a .map() callback, the block would be created or discarded at runtime, so it is rejected.

#Example

export function List(props: { items: string[] }) {
  return (
    <Suspense fallback={<p>…</p>}>
      <ul>{props.items.map((item) => <li>{item}</li>)}</ul>
      <style>
        li { margin: 0; }
      </style>
    </Suspense>
  );
}

#How to fix it

Move the block into an intrinsic element of the component (it styles the whole component anyway), or to the end of the file:

export function List(props: { items: string[] }) {
  return (
    <section>
      <Suspense fallback={<p>…</p>}>
        <ul>{props.items.map((item) => <li>{item}</li>)}</ul>
      </Suspense>
      <style>
        li { margin: 0; }
      </style>
    </section>
  );
}

#Related

• Styles: placement decides scope