no-string-style-prop

react-dom/no-string-style-prop

@eslint-react/dom-no-string-style-prop

function MyComponent() {
  // Problem: Passing a CSS string to the style prop causes a runtime error
  return <div style="color: red;" />;
}

function MyComponent() {
  // Recommended: Pass an object with camelCased CSS properties
  return <div style={{ color: "red" }} />;
}

// Recommended: use a style object with camelCased properties
function Box() {
  return (
    <div
      style={{
        margin: 20,
        height: 100,
        width: 100,
        border: "2px solid black",
        backgroundColor: "blue",
      }}
    />
  );
}

// Recommended: compute style objects dynamically from state
import { useState } from "react";

function Pointer() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      onPointerMove={(e) => setPosition({ x: e.clientX, y: e.clientY })}
      style={{
        position: "absolute",
        backgroundColor: "pink",
        borderRadius: "50%",
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: "none",
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }}
    />
  );
}