Patrón Extensible Styles en React JS: Una forma más flexible de estilizar componentes 2025

Con el patrón de Extensible Styles o Estilos Extensibles, puedes tener un control más granular y reutilizable de tus estilos, algo que para muchos desarrolladores de React JS es todo un desafío. En este post, te mostraré cómo implementarlo.

¿Qué es el patrón de Estilos Extensibles?

El patrón de Estilos Extensibles se refiere a la capacidad de crear componentes que acepten estilos personalizados y se combinen o extiendan de los estilos base del componente, permitiendo así personalizaciones más allá de las definiciones de estilo predeterminadas.

CSS en React.js y el patrón de Estilos Extensibles

Los estilos son una parte inherente en el desarrollo frontend y con React no es la excepción.

Al momento de desarrollar nuestros componentes, además de asegurarnos de que sean reusables sin necesidad de cambiar su código, también debemos preguntarnos si sus estilos también son reusables y abiertos al cambio.

Esto es especialmente importante si estás desarrollando un catálogo de componentes como si fuesen a ser usados como biblioteca de componentes de UI en una o varias de tus aplicaciones.

Hay que tomar en cuenta que en React existen diferentes maneras de aplicar estilos CSS.

Básicamente existen dos paradigmas:

• Usar el lenguaje CSS (sí, es un lenguaje pero de estilos) o sus herramientas derivadas de preprocesadores (por ejemplo, SASS, LESS).
• Usar el paradigma “CSS-in-JS” que consiste en definir el CSS pero con Javascript usando bibliotecas de terceros (Por ejemplo, Styled Components). Nosotros vamos a enfocarnos en los estilos con CSS ya que para usar preprocesadores o CSS-in-JS, se requieren herramientas que ya proveen sus propias soluciones.

Ventajas y Desventajas de Estilos Extensibles

Principales ventajas de usar estilos extensibles:

• Haces que tus componentes queden abiertos a su extensión y cerrados a su modificación (Principio Abierto - Cerrado) al poder personalizar los estilos sin necesidad de modificar el código del componente.

Principales desventajas al usar estilos extensibles:

• Sólo la complejidad adicional de tener que manejar los estilos base y los estilos personalizados.

En que casos aplicar estilos extensibles

Quizá sea algo obvio en qué casos aplicar estilos extensibles, pero considero especial atención cuando:

• Estás creando componentes cuya responsabilidad es mostrar elementos de la UI. Este tipo de componentes son muy comunes en cualquier aplicación en React.
• Estás creando una biblioteca de componentes de UI que será usada en diferentes aplicaciones. En este caso, los estilos extensibles son una necesidad.
• Necesitas personalizar los estilos de un componente sin necesidad de modificar su código.

Ejemplo de Estilos Extensibles en vídeo

Si prefieres ver una demostración práctica de cómo implementar el patrón de Estilos Extensibles en React JS, aquí tienes el vídeo completo del curso en YouTube:

Pero si prefieres leer, aquí tienes una guía paso a paso para implementar el patrón de Estilos Extensibles en React JS.

Ejemplo de Estilos Extensibles en React JS

La principal estrategia para hacer nuestros estilos CSS flexibles es por medio de los props.

Los dos tipos de valores a pasar por props son objetos de javascript para aplicar los estilos in-line (usando el atributo style), o una cadena para pasar el nombre de una clase CSS.

Componente sin Estilos Extensibles

Una vez explicado esto, vamos a ver un ejemplo de un componente Input que no tenga implementado este patrón y posteriormente vamos a ir modificándolo hasta que sus estilos puedan ser customizables.

const Button = ({ name, type, onClick, children }) => {
  return (
    <button name={name} type={type} onClick={onClick} className="button primary">
      {children}
    </button>
  )
}

Los estilos están definidos en un archivo CSS como se muestra a continuación.

.App {
  font-family: sans-serif;
  text-align: center;
}
.button {
  padding: 4px 8px;
  border-radius: 4px;
}
.primary {
  background-color: #42a5f5;
  border: #bbdefb;
  color: #ffffff;
}

Y aquí un ejemplo de cómo puede ser usado nuestro componente.

export default function App() {
  const handleClick = () => {
    alert('click!')
  }
  return (
    <div className="App">
      <Button type="button" onClick={handleClick} name="myButton">
        Click
      </Button>
    </div>
  )
}

Como puedes ver, las clases están "hardcodeadas" dentro del componente sin ninguna opción de cambiarlas.

Si es un componente que no va a ser reutilizado, no hay problema. No te preocupes por hacerlo extensible y mejor enfócate en terminar tu aplicación.

Pero si es un componente que va a ser reutilizado, entonces debes hacerlo extensible.

Si queremos cambiar sus estilos, debemos cambiar el código fuente, lo cual no es deseable en un componente reutilizable.

Debe ser abierto a su extensión y cerrado a su modificación. Desde el punto de vista de estilos, no cumple esa función.

Otro problema es que estamos abriendo las puertas para introducir bugs, pues si modificamos un componente que es usado en otros lados, corremos el riesgo de que funcione diferente a lo esperado (Para esto hay que tener unit tests).

¿Cómo lo resolvemos? No vamos a crear N componentes de tipo Button por cada N necesidad de personalizar estilos. Eso sería violar uno de los principios fundamentales de React: crear componentes reusables.

Vamos a refactorizar nuestro componente para que reciba por props el nombre de una clase CSS como opcional. Si no es pasado este prop, nuestro componente usará el nombre de clase por default.

Componente con Estilos Extensibles

const Button = ({ name, type, onClick, children, className = 'button primary' }) => {
  return (
    <button name={name} type={type} onClick={onClick} className={className}>
      {children}
    </button>
  )
}

De esta manera ya estamos permitiendo el rehusar el componente Button abierto a modificar sus estilos.

En caso de que queramos pasar estilos “in-line”, es decir, usando el atributo “style”, podemos seguir la misma lógica (aunque es preferible que uses nombres de clases CSS debido al performance).

const Button = ({ name, type, onClick, children, className = 'button primary', style = {} }) => {
  return (
    <button name={name} type={type} onClick={onClick} className={className} style={style}>
      {children}
    </button>
  )
}

Con esto, ya tenemos un componente que puede ser reutilizado y personalizado en cuanto a sus estilos.

Puedes ver y modificar el código anterior en este link: https://codesandbox.io/s/button-styles-example-evrui.

Si quieres aplicar TypeScript a este componente, una posible manera de hacerlo es:

type ButtonProps = {
  name: string
  type: 'button' | 'submit' | 'reset'
  onClick: () => void
  children: React.ReactNode
  className?: string
  style?: React.CSSProperties
}

const Button = ({
  name,
  type,
  onClick,
  children,
  className = 'button primary',
  style = {},
}: ButtonProps) => {
  return (
    <button name={name} type={type} onClick={onClick} className={className} style={style}>
      {children}
    </button>
  )
}

Cheat sheet para implementar Estilos Extensibles en React JS

Aquí tienes un resumen de los pasos para implementar el patrón de Estilos Extensibles en React JS:

1. Estilos Base: Define un conjunto base de estilos para tu componente.

const baseStyle = {
  color: 'blue',
  padding: '10px',
  margin: '5px',
}

2. Extiende Estilos: Permite que se pasen estilos personalizados como props y combínalos con tus estilos base.

function CustomButton({ customStyle }) {
  return <button style={{ ...baseStyle, ...customStyle }}>Click me!</button>
}

3. Utiliza tu componente: Ahora, cuando utilices tu componente, puedes pasar estilos personalizados.

<CustomButton customStyle={{ backgroundColor: 'red', fontSize: '20px' }} />

Resumen de Extensible Styles en React JS

• Los Estilos Extensibles son una forma de permitir que los estilos de tus componentes sean personalizables sin necesidad de modificar el código fuente.
• Puedes implementar Estilos Extensibles en React JS permitiendo que los estilos base de tus componentes se combinen con estilos personalizados pasados como props.
• Los props que pasan estilos personalizados pueden ser objetos de JavaScript para estilos in-line o cadenas para nombres de clases CSS.

Conclusión

Siempre que hagas tus componentes de UI considera agregar la extensión de estilos, probablemente lo necesites hasta cuando requieras sobreescribir o modificar los estilos de un componente.

Te recomiendo que des un vistazo a cómo funcionan las bibliotecas de UI más populares de React como:

• Bootstrap.
• Material UI.
• Ant Design.
• DaisyUI.

Son muy buenos ejemplos en cuanto al uso de extensión de estilos y pueden servir como inspiración para hacer tus propios componentes si así lo deseas.

Recursos adicionales

Si te ha gustado este análisis sobre el patrón de Estilos Extensibles, te invito a explorar los otros patrones avanzados en React JS que he analizado en la guía principal.

Y recuerda, si quieres llevar tus habilidades al siguiente nivel, no te pierdas el curso completo en el Canal de YouTube de Developero.