Menu
Here is my styled component.
import * as React from 'react'; import styled from 'styled-components'; import { ComponentChildren } from 'app-types'; interface Props { children: ComponentChildren; emphasized: boolean; } const HeadingStyled = styled.h2` ${props => props.emphasized && css` display: inline; padding-top: 10px; padding-right: 30px; `} `; const Heading = (props: Props) => ( <HeadingStyled> {props.children} </HeadingStyled> ); export default Heading; I get warnings that:
Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.Cannot find name 'css'. Did you mean 'CSS'?How can I get this to work?
448
To pass props to React components created with styled-components, we can interpolate functions into the string that creates the component. We create the ArrowStyled component with the styled. div tag. Then string that we pass into the tag has the rotate value set from a prop.
The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet. It works on both normal HTML tags as well as components, and supports everything any styled component supports, including adapting based on props, theming and custom components.
We need to install some dependencies because styled-components doesn't come with create-react-app. This installs the styled-components types for TypeScript as a dev dependency. We're also going to use Material Icons, so let's install the material-ui package .
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
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
