Estoy tratando de cambiar condicionalmente la interfaz de usuario de mi componente en componentes con estilo, pero me encontré repitiendo mucho. esto es lo que esta pasando ahora mismo:
color: ${props => (props.isProductPage ? color('white') : 'reset')}; background-color: ${props => props.isProductPage ? color('primary', 'main') : 'reset'}; font-size: ${props => (props.isProductPage ? '1.4rem' : 'reset')}; font-weight: ${props => (props.isProductPage ? '400' : 'reset')};pero quiero tener todo esto en una variable e importar esa variable condicionalmente, pero no pude averiguar qué estoy haciendo mal. Esto es lo que estoy buscando.
const ProductPageAddToCard = ` color: ${color('primary')}; background: ${color('primary', 'main')}; font-size: ${textSize('medium')}; font-weight: ${textWeight('medium')} `; export const StyledAddToCardWrapper = Styled.div` button { ${props => (props.isProductPage ? ProductPageAddToCard : '')} } `Gracias por adelantado
Puede usar la exportación 'css' de 'componentes con estilo' para crear una mezcla reutilizable. Aquí hay un pequeño ejemplo:
import styled, { css } from "styled-components"; // ... const ProductPageMixin = css` color: red; background-color: orange; `; const HomePageMixin = css` color: blue; background-color: yellow; `; const Wrapper = styled.div` ${(props) => props.isProductPage && ProductPageMixin} ${(props) => props.isHomePage && HomePageMixin} `;