glamorous
create-react-app
There is no translation for this. Can you help translate it?
Here
is an example
of using glamorous
with create-react-app
.
next.js
There is no translation for this. Can you help translate it?
Here's a deployed example of using glamorous
with Next.js
. See the code here.
jest
There is no translation for this. Can you help translate it?
Here
is an example of using glamorous
with jest
.
β¨ polished
There is no translation for this. Can you help translate it?
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>
);
}
styled-system
There is no translation for this. Can you help translate it?
glamorous
works with styled-system
helper functions.
glamorous-pseudo
There is no translation for this. Can you help translate it?
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!
glamor
There is no translation for this. Can you help translate it?
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
There is no translation for this. Can you help translate it?
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:
If that's a bit too much of a song and dance for you, then you might consider
using recompose
.
preact
There is no translation for this. Can you help translate it?
This library supports preact out of the box. Just change module name from glamorous
to glamorous/preact
and you're all set.
If you don't want to type glamorous/preact
every time, you can use webpack's resolve.alias or babel's resolver plugin to shorten the module name to your liking.
import { render, h } from "preact"
import { H1, Span } from "glamorous/preact"
const Heart = <Span color="tomato">β€</Span>
const App = () =>
<H1 textDecoration="underline">
glamorous {Heart} preact
</H1>
render(
<App/>,
document.body
)