GuΓ­as avanzadas

Esta secciΓ³n expone algunas ideas mΓ‘s avanzadas que puedes lograr con glamorous

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

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

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!!

CodeSandbox

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'}

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!!

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`.

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