Styling React Components with โ€œGlamorous ๐Ÿ’„โ€

Glamorous ๐Ÿ’„ is a styled-components ๐Ÿ’… and jsxstyle inspired solution for styling โš› React Components. It allows you to do stuff like this:

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = glamorous.h1({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred',
})

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

function App() {
  return (
    <Wrapper>
      <Title>
        Hello World, this is my first glamorous component!
      </Title>
    </Wrapper>
  )
}

Whilst I still swear by using an ITCSS structure + BEM-based approach (with the help of the classnames package to reflect the component state in the applied CSS classes) this might please many devs who โ€“ unlike me โ€“ don’t come from a CSS background.

Introducing Glamorous ๐Ÿ’„ →
Glamorous ๐Ÿ’„ →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more โ€ฆ)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.