I used to be development one thing for my product at PayPal (weblog submit possibly imminent)
and were given uninterested in writing elements like this:

const types = glamor.css({
  fontSize: 20,
  textAlign: 'heart',
})
serve as MyStyledDiv({className = '', ...relaxation}) {
  go back <div className={`${types} ${className}`} {...relaxation} />
}

So I determined to check out out
styled-components
for the reason that hype-train used to be robust 🚂. I REALLY preferred it:

It allowed me to jot down that very same element like this:

const MyStyledDiv = styled.div`
  font-size: 20px;
  text-align: heart;
`

Making composable elements that elevate their styling with them used to be simply
tremendous superior.

Sadly, I hit a wall once I learned that there is not these days a
answer for right-to-left conversion (like
CSSJanus or
rtl-css-js) and that is the reason a difficult
requirement for what I am development. I additionally had some problems with the scale of
styled-components on the time (word that you’ll transpile away numerous the
length in case you are prepared to surrender
some dynamic features,
which I used to be unwilling to do).

So after comparing a number of different answers and seeking to make stronger present
answers to be what I sought after them to be, I determined to create my very own.

Input glamorous 💄!

paypal/glamorous

glamorous is React element styling solved with a sublime
(impressed) API, small
footprint (<5kb gzipped), and nice efficiency (by means of
glamor). It has an excessively identical API
to styled-components and makes use of identical equipment underneath the hood
(glamor). The advantages being:

Let’s get a snappy have a look at what a glamorous element looks as if:

// Create a <Identify> react element that renders an <h1> which is
// targeted, palevioletred and sized at 1.5em
const Identify = glamorous.h1({
  fontSize: '1.5em',
  textAlign: 'heart',
  colour: 'palevioletred',
})

// Create a <Wrapper> react element that renders a <segment> with
// some padding and a papayawhip background
const Wrapper = glamorous.segment({
  padding: '4em',
  background: 'papayawhip',
})

serve as App() {
  go back (
    <Wrapper>
      <Identify>Hi Global, that is my first glamorous element!</Identify>
    </Wrapper>
  )
}

(due to styled-components for the instance inspiration).

The wonderful thing about glamorous is that the entire cool issues you’ll do with
glamor, you’ll do with glamorous.
Listed below are a couple of examples:

pseudoclasses

const MyLink = glamorous.a({
  ':hover': {
    colour: 'crimson',
  },
})

child-selectors
(the get away hatch you must infrequently use, however is sweet to have)

const MyDiv = glamorous.div({
  show: 'block',
  '& .ambitious': {fontWeight: 'ambitious'},
  '& .one': {colour: 'blue'},
  ':hover .two': {colour: 'crimson'},
})

const ui = (
  <MyDiv>
    <div className="one ambitious">is blue-bold!</div>
    <div className="two">hover crimson!</div>
  </MyDiv>
)

media queries

const MyResponsiveDiv = glamorous.div({
  width: '100%',
  padding: 20,
  '[@media](http://twitter.com/media "Twitter profile for @media")(min-width: 400px)':
    {
      width: '85%',
      padding: 0,
    },
})

animations

import {css} from 'glamor' // or require or no matter...

const jump = css.keyframes({
  '0%': {turn out to be: 'scale(1)', opacity: 0.3},
  '55%': {turn out to be: 'scale(1.2)', opacity: 1},
  '100%': {turn out to be: 'scale(1)', opacity: 0.3},
})

const MyBouncyDiv = glamorous.div({
  animation: `${jump} 1s limitless`,
  width: 50,
  top: 50,
  backgroundColor: 'crimson',
})

theming

With the brand new ThemeProvider (not too long ago added by way of
Alessandro Arnodo), glamorous additionally helps
theming:

const Identify = glamorous.h1(
  {
    fontSize: '10px',
  },
  (props, theme) => ({
    colour: theme.primary.colour,
  }),
)

// use <ThemeProvider> to go theme down the tree
const ui1 = (
  <ThemeProvider theme={theme}>
    <Identify>Hi!</Identify>
  </ThemeProvider>
)

// it's conceivable to nest issues
// interior issues shall be merged with outers
const ui2 = (
  <ThemeProvider theme={theme}>
    <div>
      <Identify>Hi!</Identify>
      <ThemeProvider theme={secondaryTheme}>
        {/* this shall be blue */}
        <Identify>Hi from right here!</Identify>
      </ThemeProvider>
    </div>
  </ThemeProvider>
)

And if you want world types, you’ll simply
use glamor
to try this (you’ll do that with styled-components as neatly). And there many
different cool issues you’ll do with glamor (together with
Server Aspect Rendering)!

Some other nice function of glamorous is it’ll merge glamor elegance names
in combination robotically for you. Be told extra about that
right here.

Along with the styled-components impressed API, glamorous exposes a
jsxstyle impressed API. Occasionally, you do not
need to give one thing a reputation as a result of naming issues is tricky. Particularly with
these items, you finally end up with names like Container and Wrapper and who is aware of
which is which!? So, if you happen to to find that one thing does not truly want a title, then
do not give it one!

const {Div, A} = glamorous

serve as App() {
  go back (
    <Div textAlign="heart" colour="crimson">
      <A
        href="[https://brave.com/](https://courageous.com)"
        textDecoration="none"
        colour="darkorange"
        textShadow="1px 1px 2px orange"
      >
        Browse sooner and more secure with Courageous.
      </A>
      <div>It is rapid, a laugh, and secure!</div>
    </Div>
  )
}

Oh, and only for a laugh, all this pleasure round CSS Grid were given you salivating?
It is trivially supported by way of glamorous:

// Instance impressed by way of
// [http://gridbyexample.com/examples/example12/](http://gridbyexample.com/examples/example12)
const MyGrid = glamorous.div({
  margin: 'auto',
  backgroundColor: '#fff',
  colour: '#444',
  // You'll be able to use [@supports](http://twitter.com/helps "Twitter profile for @helps") with glamor!
  // So you'll use [@supports](http://twitter.com/helps "Twitter profile for @helps") with glamorous as neatly!
  '[@supports](http://twitter.com/helps "Twitter profile for @helps") (show: grid)':
    {
      show: 'grid',
      gridGap: 10,
      gridTemplateAreas: `  
      "....... header header"  
      "sidebar content material content material"  
      "footer  footer  footer"  
    `,
    },
})

const Field = glamorous.div({
  backgroundColor: '#444',
  colour: '#fff',
  borderRadius: 5,
  padding: 10,
  fontSize: '150%',
})

const HeaderFooter = glamorous(Field)({
  backgroundColor: '#999',
})

serve as App() {
  go back (
    <MyGrid>
      <HeaderFooter css={{gridArea: 'header'}}>Header</HeaderFooter>
      <Field css={{gridArea: 'sidebar'}}>Sidebar</Field>
      <Field css={{gridArea: 'content material'}}>
        Content material
        <br />
        Extra content material than we had earlier than so this column is now slightly tall.
      </Field>
      <HeaderFooter css={{gridArea: 'footer'}}>Footer</HeaderFooter>
    </MyGrid>
  )
}

And you get:

Instance impressed by way of
http://gridbyexample.com/examples/example12/

I’m hoping you revel in glamorous 💄
🌟
👀!

See you round on twitter: @glamorousCSS and
@kentcdodds

With ❤️ from PayPal (we are hiring!)