How to define css variables in style attribute in React and TypeScript

by

Like this:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Or without the extra style variable:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}

More Related Contents:

  1. Cannot use JSX unless the ‘–jsx’ flag is provided
  2. Default property value in React component using TypeScript
  3. How do I type this ‘as’ JSX attribute in TypeScript?
  4. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  5. Dynamic tag name in React JSX
  6. PropTypes in a TypeScript React Application
  7. How to use refs in React with Typescript
  8. React: Expected an assignment or function call and instead saw an expression
  9. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  10. Property ‘value’ does not exist on type ‘Readonly’
  11. You should not use outside a
  12. Typescript image import
  13. Set loading state before and after an action in a React class component
  14. Set types on useState React Hook with TypeScript
  15. Visual studio code changes format (React-JSX)
  16. What does the colon mean in Javascript after function?
  17. React Hooks – Modified state not reflecting immediately
  18. React Hooks – Modified state not reflecting immediately
  19. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  20. React with Typescript — Generics while using React.forwardRef
  21. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  22. Passing object as props to jsx
  23. Disable ESLint that create-react-app provides
  24. React and TypeScript—which types for an Axios response?
  25. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  26. Webpack & Typescript image import
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. Only allow specific components as children in React and Typescript
  29. ‘React’ was used before it was defined
  30. Using styled-components with props and TypeScript

Leave a Comment