Estoy usando la biblioteca styled-components para extender los componentes de encabezado de la biblioteca Blueprintjs . El componente H6 actualmente se ve así:
export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white" : null)}; display: ${(props) => (props.flex ? "flex" : null)}; opacity: ${(props) => (props.opaque ? 0.7 : null)}; font-weight: ${(props) => (props.heavy ? 500 : 300)}; text-align: ${(props) => (props.center ? "center" : null)}; font-style: ${(props) => (props.italics ? "italic" : null)}; text-decoration: ${(props) => (props.underline ? "underline" : null)}; `; Esto funciona bien. Ahora quiero aplicar los mismos accesorios de D1 a D5 . ¿Hay alguna manera de hacerlo en SECO, en lugar de hacer frente a los accesorios? Intenté asignar los accesorios a una variable sin éxito:
const generalProps = { opacity: ${(props) => (props.opaque ? 0.7 : null)}, color: ${(props) => (props.white ? "white" : null)}, display: ${(props) => (props.flex ? "flex" : null)}, font-weight: ${(props) => (props.heavy ? 500 : 300)}, text-align: ${(props) => (props.center ? "center" : null)}, font-style: ${(props) => (props.italics ? "italic" : null)}, text-decoration: ${(props) => (props.underline ? "underline" : null)} } export const DH6 = styled(H6)` {...generalProps} `; ¿Hay alguna forma de hacer la asignación de accesorios a partir de variables en styled-components ?
Como un ejemplo rápido se puede utilizar
import styled, {css} from 'styled-components' const GlobalStyles = css` color: ${(props) => (props.white ? "white" : null)}; display: ${(props) => (props.flex ? "flex" : null)}; opacity: ${(props) => (props.opaque ? 0.7 : null)}; font-weight: ${(props) => (props.heavy ? 500 : 300)}; text-align: ${(props) => (props.center ? "center" : null)}; font-style: ${(props) => (props.italics ? "italic" : null)}; text-decoration: ${(props) => (props.underline ? "underline" : null)}; ` const StyledDiv = styled.div` ${GlobalStyles} // Other Styles ` Lo que haría es importar css desde los styled-components
con eso puede generar el css específico y devolverlo como una plantilla literal ver el documento .
y para la reutilización, generalmente puede usar ${value} que es equivalente para Spread Operator (o {...value} ) para componentes con estilo