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 πŸ’„ →

Elsewhere , ,

Leave a Reply

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