There have been some recent developments and with a new version of Typescript (eg. 3.0.1) and styled-components (eg. 3.4.5) there's no need for a separate helper. You can specify the interface/type of your props to styled-components directly.
interface Props {
onPress: any;
src: any;
width: string;
height: string;
}
const Icon = styled.Image<Props>`
width: ${p => p.width};
height: ${p => p.height};
`;
and if you want to be more precise and ignore the onPress
const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
width: ${p => p.width};
height: ${p => p.height};
`;
Top answer 1 of 10
211
There have been some recent developments and with a new version of Typescript (eg. 3.0.1) and styled-components (eg. 3.4.5) there's no need for a separate helper. You can specify the interface/type of your props to styled-components directly.
interface Props {
onPress: any;
src: any;
width: string;
height: string;
}
const Icon = styled.Image<Props>`
width: ${p => p.width};
height: ${p => p.height};
`;
and if you want to be more precise and ignore the onPress
const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
width: ${p => p.width};
height: ${p => p.height};
`;
2 of 10
23
The easiest way as styled-components docs said:
import styled from 'styled-components';
import Header from './Header';
const NewHeader = styled(Header)<{ customColor: string }>`
color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor
styled-components
styled-components.com › docs › api
styled-components
If you are adapting the styles based on props, and those props are not part of the base tag / component props, you can tell TypeScript what those extra custom props are, with type arguments like this:
Videos
00:25
Enabling props for Styled Components w/ TypeScript #styledcomponents ...
40:10
React Typescript #2 Styling with Styled Components - YouTube
01:30:12
CSS-in-JS com Styled Components no React Native | Decode #25 - YouTube
28:00
React Typescript and Styled-Components Tutorial - YouTube
10:19
React Typescript Tutorial - Styled Components - React TS Crash ...
GitHub
github.com › styled-components › styled-components › issues › 630
How do I provide props to styled elements in Typescript? · Issue #630 · styled-components/styled-components
March 30, 2017 - I looked at the docs and other than creating a whole empty component purely for providing a definition of props I'm not sure of if it's possible to provide custom props to a styled element other than theme. Example For the above example ...
Author tal
LogRocket
blog.logrocket.com › home › using styled-components in typescript: a tutorial with examples
Using styled-components in TypeScript: A tutorial with examples - LogRocket Blog
June 4, 2024 - We also created default styles for our component. The lines of code inside the component mean that if a color or font-size prop is specified when using the component, then color and font-size are equal to the specified one, Otherwise, the text component uses the default values stated therein.
DevGenius
blog.devgenius.io › using-styled-components-and-props-with-typescript-react-a3c32a496f47
Using styled-components and Props With Typescript React | by Ndukwe Armstrong | Dev Genius
April 23, 2021 - Now, I define an interface at the top of the styled button with both properties · ... interface IBtn { submit: boolean, pay: string}const BUTTON = styled.button` border: 1px dotted yellow; background: white; color: black; font-weight: 500; ` ... Now, you simply pass this interface to the styled button, this helps typescript to check the types of pros to be received for the component
CodeVertiser
codevertiser.com › styled-components-typescript-prop-types-issue
How To Fix Styled Components Prop Types Issue In Typescript
July 22, 2022 - Besides typescript, I use styled components for styling, because theming, conditional and reusable styling is easier in styled components. Styled components take props and based on props we can define styling.
Medium
byrayray.medium.com › how-to-add-props-to-styled-components-in-react-js-with-typescript-1df49ef951bf
How To Add Props To Styled Components in React.js with TypeScript | by RayRay | Medium
March 16, 2021 - I define the property state in my interface, and I tell that I accept only the values of the sendState enum. So if I put in another value, my IDE and build system starts complaining. TypeScript helps me write predictable code, as you can see. You usually define a styled-component like: export const StatusMessage = styled.div this.
DEV Community
dev.to › griseduardo › styled-components-in-react-with-typescript-nfj
Styled-components in React with Typescript - DEV Community
December 26, 2024 - Below, I'll provide a simple example for a text component (with fewer props to keep the example concise). The idea is to apply the structure mentioned above and demonstrate how prop passing works: import styled from "styled-components"; const StyledText = styled.span` color: ${(props) => (props.$color ?
styled-components
styled-components.com › docs › basics
Styled Components Basic
This button component has a primary state that changes its color. When setting the $primary prop to true, we are swapping out its background and text color.
DEV Community
dev.to › umeshiscreative › pass-props-to-css-in-styled-components-with-typescript-27ph
Pass Props to CSS in styled-components with typescript. - DEV Community
January 15, 2021 - const Container = styled.div<ContainerType>` ${css` width: ${(props: ContainerType) => props.width !== undefined ? props.width + "px" : 240px}; `} `; ... Many Thanks for Reading this small content. ... Create a Dot Navigation Component in React with Typescript.
GitHub
github.com › emotion-js › emotion › issues › 1137
`as` prop of styled components in TypeScript · Issue #1137 · emotion-js/emotion
December 28, 2018 - // Custom styled function that is typed with my theme interface import styled, { CreateStyled } from '@emotion/styled' import { ITheme } from '../theme' export default styled as CreateStyled<ITheme> // Style function interface in a Util module declare module 'Util' { import { css } from '@emotion/core' import { ITheme } from '../util/theme' type CssType = typeof css export interface IStyleFunction<P = {}> { ( arg0: { theme: ITheme } & P): ReturnType<CssType> | false | null } } // Component code type HeadingProps = { size?: FontSizes } const baseStyles: IStyleFunction<HeadingProps> = ({ theme }
Author felixjung
Code with Mosh
forum.codewithmosh.com › typescript
TypeScript with Styled components - TypeScript - Code with Mosh Forum
March 17, 2023 - Does anyone know why, when using styled-componets with react, you pass the component a reference to the entire interface instead of the idividual paramets in the interface? I am new to TS so I may be using some words incorrectly. -You can see at the top, ListItemProps is passed entirely to the styled-component, and below that, the ListGroup component accepts the individual parameters of the Props interface.
Medium
medium.com › bungalow-garage › adopting-styled-components-with-typescript-in-react-native-c57078cd818f
Adopting styled components with Typescript in React Native | by Mike Post | Bungalow Garage | Medium
May 10, 2019 - Got to love Typescript. A major appeal about styled is how much it cleans up the detail in your main JSX component. If we decided we’d like an InnerBox with a margin of 10 px smaller vertically and horizontally to the outer box dimensions, we just create another style based on View and simply nest the style tag within the BoxRoot style tag: Back to addressing our padding values from ThemeInterface. We can spread out props into the sytled component via {…props}, instead of explicitly setting them via individual attributes like className={props.className}. Notice that the padding attribute is still able to be set from a value in our theme prop, just like in the original example.
Emotion
emotion.sh › docs › typescript
Emotion – TypeScript
If you use our pragma implicitly (for example when using our @emotion/babel-preset-css-prop) we have a special file that can be imported once to add support for the css prop globally, for all components. Use it like this: /// <reference types="@emotion/react/types/css-prop" /> @emotion/styled works with TypeScript without any additional configuration.
DEV Community
dev.to › timrichter › how-to-use-styled-system-with-typescript-2fjo
How to use styled-system with typescript - DEV Community
August 12, 2022 - We combine all props from the container, space props and our custom "content"-prop together into one type and pass that to the component. In the end we can pass: All Props that a normal div element would except, these would get passed to our Container · All Space Props from styled-system, these get also passed to our Container
Newline
newline.co › @kchan › annotating-react-styled-components-with-typescript--e8076d1d
Annotating React Styled Components with TypeScript | newline
November 24, 2021 - Styled components redefine how we apply CSS styles to React components. Unlike the traditional approach of manually assigning CSS classes (from an imported CSS file) to elements within a component, CSS-in-JS libraries like styled-components provide primitives for locally scoping CSS styles to a component with unique, auto-generated CSS classes.
Medium
medium.com › @luxtars.dev › use-styled-components-with-typescript-73b703261d9e
Use styled-components with TypeScript | by Luxtars Dev | Medium
April 8, 2020 - As I’m transitioning most of my projects to include TypeScript, there are things I stumbled along, but there are things that feel perfect. Listing down some of them here. Styled Components library does not ship with types. Instead, we have to install it from the Definitely Typed repository. npm i --save-dev @types/styled-components// ORyarn add -D @types/styled-components · One of the major advantages of using a CSS-in-JS solution is the ability to pass custom props on runtime and adapt CSS accordingly.
Sunscrapers
sunscrapers.com › blog › styled-components-conditional-styles-with-typescript
Styled Components: Conditional Styles with TypeScript | Sunscrapers
July 27, 2022 - Styled components is a popular ... is that you can write actual JS logic inside of them, so your styles can be changed based on the props you pass down to them....
Top answer 1 of 3
3
It's not working due to this @types/styled-components issue -> link
2 of 3
2
TypeScript is complaining because your Link component that comes from react-router requires you to specify a to prop. I am not sure what you are trying to achieve, but Link should already render as an <a /> tag.
If you are willing to render a link to, let's say, an external website, you probably don't want to use a styled(Link), but a styled.a.
If you worry about repeating your style for both the styled(Link) and styled.a, you'd probably want to write a reusable button style using the css helper function and include it in both of your styled components.
Unfortunately, I believe it is the only option for now, as I have been in a similar case, and tried using as={Link} on a styled.a and TypeScript complains about unrecognised props. I believe that the implementation of the polymorphic as prop on TypeScript is not fully functional so there might be a fix later on.
Carl Rippon
carlrippon.com › playing-with-styled-components
Playing with Styled Components
Can we pass props to styled components? Of course we can! We can use a TypeScript interface to define the props and then reference them in the CSS using an arrow function in the template literal.