0

The Linaria documentation here claims that the following should be possible

export function Box({ size }) {
  return (
    <div
      className={box}
      style={{ '--box-size': size }}
    />
  );
}

However, the compiler justifiably errors like this

Type '{ '--box-size': any; }' is not assignable to 
  type 'Properties<string | number, string & {}>'.

Object literal may only specify known properties, 
  and ''--box-size'' does not exist in type 
  'Properties<string | number, string & {}>'.

index.d.ts(1863, 9): The expected type comes from 
  property 'style' which is declared here on type 
  'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, 
  HTMLDivElement>'

Is there a way to pass in --box-size - or any custom CSS property - into a JSX element?

Joseph Beuys' Mum
  • 2,395
  • 2
  • 24
  • 50
  • duplicate of https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript/52013197#52013197 – Joseph Beuys' Mum Oct 25 '22 at 12:08

0 Answers0