Aquí está mi componente con estilo.
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;Recibo advertencias de que:
Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.Cannot find name 'css'. Did you mean 'CSS'?¿Cómo puedo hacer que esto funcione?
styled("h2")<IProps> . Puede leer más sobre el patrón en la documentación .css no se requiere aquí, se agrega como ayuda cuando realmente necesita devolver CSS desde una función. Echa un vistazo a la representación condicional .Teniendo esto en cuenta, el componente se convierte en:
const HeadingStyled = styled("h2")<{emphasized: boolean}>` ${props => props.emphasized && ` display: inline; padding-top: 10px; padding-right: 30px; `} `;La respuesta anterior funcionó para mí, pero solo para agregar información que también fue útil en mi caso:
StyledComponents utiliza una interfaz "ThemedStyledFunction" que permite al usuario definir tipos de accesorios adicionales.
Eso significa que podría crear una interfaz como:
interface IHeadingStyled { emphasized: boolean; }Y úsalo en el componente:
const HeadingStyled = styled("h2")<IHeadingStyled>` ${props => props.emphasized && ` display: inline; padding-top: 10px; padding-right: 30px; `} `;(Que es una forma más limpia de implementar lo que sugirió @BoyWithSilverWings, en caso de que tenga varios accesorios)
Consulte esta discusión para obtener información más completa:
https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605
Esta solución también funciona con la emoción, ¿tal vez porque ambos usan stylis como preprocesador?
interface ButtonProps { width: string; } const Button = styled("button")<ButtonProps>((props) => { return `width: ${props.width};`; });o diferente sabor lo mismo
interface ButtonProps { width: string; } const Button = styled("button")<ButtonProps>` width: ${props => props.width}; `;