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.