0
268
ViewsCómo diseñar un componente con scss usando accesorios (sin usar componentes con estilo)
Creé una biblioteca de interfaz de usuario, que tendrá varios componentes. Estos componentes no deben cambiarse en la interfaz, y todas sus variaciones deben definirse en la biblioteca, por lo que solo necesitan pasar accesorios al componente.
Para la biblioteca estoy usando React + storybook + typescript + rollup.
No quiero usar componentes con estilo porque el proyecto debe ser rápido y no detallado. Necesita tener un buen rendimiento y una respuesta rápida.
Además, no debería usar ninguna biblioteca de UI (como material UI o bootstrap).
Por ejemplo: uso de frontend
<Button size='small' color='primary'> Test </Button>Componente en UI lib:
import React, { MouseEventHandler } from 'react'; import './Button.scss' export interface ButtonProps { children: React.ReactNode, color: 'primary' | 'secondary', disabled?: boolean, size?: 'small' || 'large', onClick?: MouseEventHandler<HTMLButtonElement> } const Button: React.FC<ButtonProps> = ({size, color, disabled, children, onClick, ...props}) => { return ( <button type="button"> {children} </button> ) } export default ButtonMe gustaría saber cómo manejar estas propiedades, poder pasar diferentes tamaños, colores y propiedades, y poder cambiar esto en scss sin usar componentes con estilo.
También pensé en crear ts ENUM para los tamaños y colores, pero no sé cómo hacerlo y no sé si tiene sentido para este proyecto. También me gustaría saber cuál es la mejor estructura para usar en este caso con scss. (cómo crear estos diferentes estilos dentro de scss).
También me gustaría saber cómo puedo crear un estilo global en mi lib para crear variables de colores y tamaños de fuente.
Esta es la estructura de carpetas de mi proyecto:
1 answers
Answer question0
Por lo que veo ya eres capaz de consumir children . Para las propiedades relacionadas con el comportamiento del button , simplemente puede usar la sintaxis de propagación . Para cada propiedad de estilo, puede crear una class relacionada y capturarla dentro de su archivo SCSS:
const Button: React.FC<ButtonProps> = ({ size, color, children, ...othersProps }) => { return ( <button {...othersProps} type="button" class={`button ${size} ${color}`}> {children} </button> ); }; export default Button; .button { &.small { font-size: 13px; } &.large { font-size: 20px; } &.primary { color: red; } &.secondary { color: blue; } }Finalmente, sobre sus otras preguntas, si me lo permite, le sugiero que comience poco a poco, intente tener algo que funcione y luego pueda reformatear su código.