Guías avanzadas

Esta sección expone algunas ideas más avanzadas que puedes lograr con glamorous
Editar

Ref interior

Cómo acceder el ref interno

Algunas veces necesitarás acceso al ref del componente interior del que glamorous renderiza. Puedes lograr esto con la prop innerRef.

Esta prop debe ser una función, y si es proveída debe ser llamada con una referencia al elemento interior.

Un elemento input dentro de un form
Editar

Trabajando con CSS existente

Muchas veces querrás usar glamorous dentro de un proyecto ya existente, que se encuentre usando CSS global. La API de glamorous intenta que trabajar en estos proyectos sea lo más fácil posible.

Recuerda esto

Con CSS en JS, el objetivo es estilar componentes y reusarlos. Con esto en mente, si necesitas estilar tu aplicación entera (usando selectores html/body o añadiendo estilos de reseteo), no lo harás con glamorous directamente. En su lugar debes usar CSS regular, o usar la API de glamor para inyectar estos estilos de forma global.

Adicionalmente, en lugar de usar CSS global para estilar un elemento a, debes crear un componente Link con todos los estilos que necesites, y reusar este elemento alrededor de tu aplicación.

// TODO
Editar

Temas

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/advanced/content/es/theming.md was updated to when the /pages/advanced/content/theming.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/advanced/content/es/theming.md. So you'll have to click the "Files changed" tab, then search for /pages/advanced/content/es/theming.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

See what's changedOpen GitHub Editor for /pages/advanced/content/es/theming.md
CodeSandbox
Editar

Context

There is no translation for this. Can you help translate it?

context is an unstable API and it's not recommended to use it directly. However, if you need to use it for some reason, here's an example of how you could do that:

const dynamicStyles = (props, context) => ({
  color: context.isLoggedIn ? 'green' : 'red'
})
const MyDiv = glamorous.div(dynamicStyles)
MyDiv.contextTypes = {
  isLoggedIn: PropTypes.string,
}

class Parent extends React.Component {
  getChildContext() {
    return {
      isLoggedIn: true,
    }
  }
  render() {
    return <MyDiv />
  }
}

Parent.childContextTypes = {
  isLoggedIn: PropTypes.string,
}

<Parent />
// renders <div />
// with {color: 'green'}
Editar

Optimizando el tamaño de la distribución

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/advanced/content/es/size.md was updated to when the /pages/advanced/content/size.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/advanced/content/es/size.md. So you'll have to click the "Files changed" tab, then search for /pages/advanced/content/es/size.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

See what's changedOpen GitHub Editor for /pages/advanced/content/es/size.md

Si la cantidad de kilobytes es una prioridad para tu aplicación, considera usar la versión "tiny" de glamorous. Esta es una versión "miniatura" con algunas limitaciones:

  1. No incluye fábricas de componentes (glamorous.article({/* styles */ })) Tienes que crear tú mismo las que necesites (glamorous('article')({/* styles */ }))
  2. No incluye los componentes de glamorous por defecto (glamorous.Span)
  3. No incluye filtración automática de props para estilos dinámicos. En su lugar, tienes que colocar estos estilos en una prop glam especial (mira el ejemplo debajo).
  4. Si necesitas usar ThemeProvider o withTheme los tienes que importar manualmente. No son exportados dentro de glamorous tiny como lo son en glamorous

Este es un ejemplo de lo que puedes lograr con glamorous tiny.

import React from 'react'
import glamorous from 'glamorous/dist/glamorous.es.tiny'

const Comp = glamorous('div')({
  color: 'red'
}, (props) => ({
  fontSize: props.glam.big ? 20 : 12
}))
function Root() {
  return (
    <Comp
      glam={{ big: true }}
      estoSeraReenviadoYReactMostraraUnaAdvertencia
    >
      Hola
    </Comp>
  )
}

export default Root

Una mejor experiencia

Recomendamos usar ya sea babel-plugin-module-resolver o la opción resolve.alias en la configuración de Webpack para que no tengas que importar desde el path completo.

Tienes las siguientes opciones disponibles:

  1. glamorous/dist/glamorous.es.tiny.js - elige esta si usas Webpack@>=2 o Rollup
  2. glamorous/dist/glamorous.cjs.tiny - elige esta si no estás transpilando ESModules
  3. glamorous/dist/glamorous.umd.tiny.js - elige esta si estás incluyéndola como un script (también hay una versión .min.js)

El tamaño actual de glamorous/dist/glamorous.umd.tiny.min.js es: tiny size tiny gzip size

Ten en cuenta que `glamorous` depende de `glamor`. A la hora de añadir `glamorous`
considera el tamaño total de las dos librerias, si aún no usas `glamor`.
Editar

Renderizado en el servidor

Ya que glamor y React nos permiten renderizar en el servidor, ¡glamorous tambien lo hace! Personalmente uso esta función en mi website personal, el cual es generado al momento que es compilado en el servidor. Aprende más sobre renderizar React en el servidor y tambien glamor.

Contribuidores

kentcdodds's GitHub avatarpaulmolluzzo's GitHub avatarJReinhold's GitHub avatar