Estoy usando componentes con estilo en un proyecto de reacción y me pregunto si hay una manera de reducir estos 3 bloques que se repiten, con la única diferencia del color del borde.
Inicialmente, estoy pensando en crear un objeto que mapee los posibles valores de alerta (éxito, advertencia, peligro) y agregue el color apropiado como sus claves, sin embargo, no estoy seguro de dónde colocar ese objeto.
const customStyles = { ${({ alert }) => alert === "success" && css` border: 1px solid green; `} ${({ alert }) => alert === "warning" && css` border: 1px solid orange; `} ${({ alert }) => alert === "danger" && css` border: 1px solid red; `} } const Input = styled.input` ${customStyles} `;¿Qué tal una función que puede reutilizar que devuelve el color correcto según el valor?
Algo como esto:
function getAlertColor(alert){ switch (alert) { case "success": return "green" case "warning": return "orange" case "danger": return "red" } } const Input = styled.input` border: ${props => `1px solid ${getAlertColor(props.alert)};`}; `;