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