Integrations
glamorouscreate-react-app
Here is an example
of using glamorous with create-react-app.
next.js
Here's a deployed example of using glamorous with Next.js. See the code here.
jest
Here
is an example of using glamorous with jest.
✨ polished
glamorous works with ✨ polished mixins, helpers, and shorthands:
const MyStyledParagraph = glamorous.p({
fontSize: 20,
color: lighten(0.5, '#000'),
})You can also use object spread properties to apply more complex ✨ polished mixins directly onto glamorous components:
function GlamorousLogo() {
return (
<glamorous.Div
width={400}
height={400}
border="2px solid"
borderColor={mix(0.5, '#fff', '#000')}
{...borderRadius('top', '5px')}
>
</glamorous.Div>
);
}CodeSandbox
styled-system
glamorous works with styled-system helper functions.
Interactive demo
CodeSandbox
glamorous-pseudo
A handy abstraction
With the built-in components, if you want to use pseudo-states, you have to
use the css prop. If you'd rather not do that, then you can use
glamorous-pseudo.
Inspiration
This was inspired by this tweet from @tkh44. Thanks!
CodeSandbox
glamor
You can use glamor to define CSS and use the className to apply styles to a glamorous component. This is pretty handy for creating reusable style objects, or doing fun things like keyframe animations.
const { css } = glamor // make the keyframes with glamor const bounce = css.keyframes({ '0%': { transform: `scale(1.1)` }, '100%': { transform: `scale(0.9)` } }) // create a component with style const AnimatedDiv = glamorous.div({ fontSize: 50, width: '100%', textAlign: 'center', // animate the div with the keyframes animation: `${bounce} 0.25s infinite ease-in-out alternate` }) render( <AnimatedDiv>😎</AnimatedDiv> )
recompose
glamorous creates simple components, if you'd like to enhance these components
further, you can do so easily by wrapping them in a component yourself:
Example of wrapping a glamorous component
If that's a bit too much of a song and dance for you, then you might consider
using recompose.
CodeSandbox
Contributors:
