Los componentes con estilo tienen una función css auxiliar. Pero no entiendo cuándo debo usarlo.
Por ejemplo, este es su ejemplo donde lo usan:
import styled, { css } from 'styled-components' const complexMixin = css` color: ${props => (props.whiteColor ? 'white' : 'black')}; ` const StyledComp = styled.div` /* This is an example of a nested interpolation */ ${props => (props.complex ? complexMixin : 'color: blue;')}; `Pero si tomamos un ejemplo similar de los documentos aquí, no lo usan:
const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${props => props.primary ? "palevioletred" : "white"}; color: ${props => props.primary ? "white" : "palevioletred"}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `;Su descripción tampoco es clara y me confunde:
Una función auxiliar para generar CSS a partir de un literal de plantilla con interpolaciones. Debe usar esto si devuelve un literal de plantilla con funciones dentro de una interpolación debido a cómo funcionan los literales de plantilla etiquetados en JavaScript.
¿Alguien puede ayudar a explicar por qué lo necesitamos?
PD: esta respuesta tampoco la usa
Uso la función css cuando creo variantes para un componente:
ese es el conmutador de variantes:
const sizeVariant: Record<NonNullable<StyledLogoProps['size']>, ReturnType<typeof css>> = { small: css` width: 44px; height: 44px; `, regular: css` width: 93px; height: 93px; `, };ese componente fue creado por 'componentes con estilo':
interface StyledLogoProps { size: 'small' | 'regular'; } export const StyledLogo = styled.div<StyledLogoProps>` ${({ size }) => sizeVariant[size]} `;y este es el uso en la reacción:
<> <StyledLogo size="regular" /> <StyledLogo size="small" /> </>una cosa bastante útil