Using styled components with Typescript, prop does not exist?

by
  • The styled component will have to specify the prop to pass to the component like styled("h2")<IProps>. You can read more about the pattern from documentation
  • css is not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering.

Taking these into account, the component becomes:

const HeadingStyled = styled("h2")<{emphasized: boolean}>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

A use-case for css

Related Contents:

  1. TypeScript and React – children type?
  2. Typescript input onchange event.target.value
  3. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  4. Default property value in React component using TypeScript
  5. TypeScript error: Property ‘X’ does not exist on type ‘Window’
  6. ‘React’ was used before it was defined
  7. ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)
  8. How to use children with React Stateless Functional Component in TypeScript
  9. Typescript React: Access component property types
  10. How to define css variables in style attribute in React and typescript
  11. conditional rendering in styled components
  12. Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element
  13. Typescript complains Property does not exist on type ‘JSX.IntrinsicElements’ when using React.createClass?
  14. Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?
  15. How to solve “JSX element implicitly has type ‘any’ ” error?
  16. Type for style attribute passed to function
  17. Using a forwardRef component with children in TypeScript
  18. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  19. TypeScript workaround for rest props in React
  20. useRef TypeScript – not assignable to type LegacyRef
  21. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  22. Typescript: How to add type check for history object in React?
  23. error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’
  24. Removing object from array using hooks (useState)
  25. React with Typescript — Generics while using React.forwardRef
  26. How to configure react-script so that it doesn’t override tsconfig.json on ‘start’
  27. What is the TypeScript return type of a React stateless component?
  28. Storybook-tailwind. How should I add tailwind to storybook
  29. React 16.7 – React.SFC is now deprecated
  30. Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’ with React 16
  31. Best way to test input value in dom-testing-library or react-testing-library
  32. Typescript types for React checkbox events and handlers?
  33. Correct way to type nullable state when using React’s useState hook
  34. react-router-dom with TypeScript
  35. A spread argument must either have a tuple type or be passed to a rest parameter React
  36. What is the react-app-env.d.ts in a react typescript project for
  37. How to extend styled component without passing props to underlying DOM element?
  38. React testing library: Test styles (specifically background image)
  39. declare type with React.useImperativeHandle()
  40. jest spyOn not working on index file, cannot redefine property
  41. Property … does not exist on type ‘IntrinsicAttributes & …’
  42. How to fix ‘Static HTML elements with event handlers require a role.’?
  43. How to test material ui autocomplete with react testing library
  44. Type of Axios mock using jest typescript
  45. npx create-react-app prompting to globally uninstall non-existent create-react-app package?
  46. React – useRef with TypeScript and functional component
  47. Typescript styled-component error: “Type ‘{ children: string; }’ has no properties in common with type ‘IntrinsicAttributes’.”
  48. Jest: SVG require causes “SyntaxError: Unexpected token
  49. Transparent iFrame blocks mouse event when using react-scripts start
  50. Can create-react-app be used with TypeScript

Leave a Comment