Style React
Mastering the bridge between JavaScript Logic and Visual Presentation.
Preview Mode
> In React, inline styles aren't strings. They are JavaScript objects. We use camelCase instead of kebab-case for property names.
The React Styling Paradigm
En React, el estilo no es un simple atributo de texto. Es un **estado del sistema**. Tenemos dos caminos principales:
1. Inline Styles (The Object Way)
A diferencia de HTML puro donde haces `style="color: red"`, en React pasas un objeto. Esto permite inyectar variables de JavaScript directamente en el diseño.
const dynamicColor = isError ? 'red' : 'green';
<div style={{ color: dynamicColor, padding: '10px' }} />2. Class Styles (The Architecture Way)
Utilizamos `className`. Es la forma preferida para mantener el performance y la separación de conceptos. Permite aprovechar todo el poder de CSS (media queries, pseudo-clases) que los Inline Styles no pueden manejar fácilmente.
Glossary: React UI Engineering
camelCase Styling
Converting CSS properties like 'background-color' to 'backgroundColor' for JS objects.
className
The JSX attribute used to specify a CSS class. Replaces the standard 'class' attribute.
Conditional Rendering
Using ternary operators or logical AND to switch styles based on state.
CSS-in-JS
A pattern where CSS is composed using JavaScript instead of external files.