glamorous composition for inline styling
glamorous is a library to help style components from the component itself rather than from a css stylesheet. You create a component with style in the form of a javascript object.
require glam import 'glamorours';
const InfoSpan = glam.span({
backgroundColor: 'none',
width: '20%',
margin: '0 1rem',
padding: '0 1rem',
display: 'inline-block',
boxSizing: 'borderBox'
});
Later when rendering, you can use this as if it were a component.
render() {
return (
<div>
<InfoSpan>
Some Important Information
</InfoSpan>
</div>
);
}
You can also compose additional glamorous components by re-using previously declared glamorous components.
const LeftSpan = glamorous(InfoSpan, {
textAlign: 'right'
});
const RedArticle = glamorous(Article, {
textAlign: 'left'
});
Tweet