How to use styletron-utils - 10 common examples
To help you get started, we’ve selected a few styletron-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
styletron / styletron / packages / styletron-react / src / styled.js View on Github 
function assignProps(styletron, styleResult, ownProps) {
const styletronClassName = injectStylePrefixed(styletron, styleResult);
// Skipping cloning of `ownProps` since that's already done internally
if (ownProps.styleProps) {
delete ownProps.styleProps;
}
ownProps.className = ownProps.className
? `${ownProps.className} ${styletronClassName}`
: styletronClassName;
return ownProps;
}export const cx = (styles) => {
const sx = formatStyles(styles)
return injectStyle(styletron, sx)
// return renderer.renderRule(() => sx)
}function strictAssignProps(styletron, styleResult, ownProps) {
return Object.assign({}, ownProps, {
className: injectStylePrefixed(styletron, styleResult),
});
}row: injectStylePrefixed(styletron, {
flexDirection: 'row'
}),
color0: injectStylePrefixed(styletron, {
backgroundColor: '#222'
}),
color1: injectStylePrefixed(styletron, {
backgroundColor: '#666'
}),
color2: injectStylePrefixed(styletron, {
backgroundColor: '#999'
}),
color3: injectStylePrefixed(styletron, {
backgroundColor: 'blue'
}),
color4: injectStylePrefixed(styletron, {
backgroundColor: 'orange'
}),
color5: injectStylePrefixed(styletron, {
backgroundColor: 'red'
}),
fixed: injectStylePrefixed(styletron, {
width: '20px',
height: '20px'
})
};
export default Box;.add('styletron (vendor prefix)', function() {
let styletron = new StyletronServer();
StyletronUtils.injectStylePrefixed(styletron, {
width: 'calc(100%)',
height: ['min-content', 'calc(50%)'],
boxSizing: 'border-box',
});
styletron.getCss();
})
.add('glamor (vendor prefix)', function() {);
const styles = {
outer: injectStylePrefixed(styletron, {
padding: '4px'
}),
row: injectStylePrefixed(styletron, {
flexDirection: 'row'
}),
color0: injectStylePrefixed(styletron, {
backgroundColor: '#222'
}),
color1: injectStylePrefixed(styletron, {
backgroundColor: '#666'
}),
color2: injectStylePrefixed(styletron, {
backgroundColor: '#999'
}),
color3: injectStylePrefixed(styletron, {
backgroundColor: 'blue'
}),
color4: injectStylePrefixed(styletron, {
backgroundColor: 'orange'
}),
color5: injectStylePrefixed(styletron, {
backgroundColor: 'red'
}),
fixed: injectStylePrefixed(styletron, {
width: '20px',
height: '20px'
})
};outer && styles.outer
]}
/>
);
const styles = {
outer: injectStylePrefixed(styletron, {
padding: '4px'
}),
row: injectStylePrefixed(styletron, {
flexDirection: 'row'
}),
color0: injectStylePrefixed(styletron, {
backgroundColor: '#222'
}),
color1: injectStylePrefixed(styletron, {
backgroundColor: '#666'
}),
color2: injectStylePrefixed(styletron, {
backgroundColor: '#999'
}),
color3: injectStylePrefixed(styletron, {
backgroundColor: 'blue'
}),
color4: injectStylePrefixed(styletron, {
backgroundColor: 'orange'
}),
color5: injectStylePrefixed(styletron, {
backgroundColor: 'red'
}),
fixed: injectStylePrefixed(styletron, {
width: '20px',outer: injectStylePrefixed(styletron, {
padding: '4px'
}),
row: injectStylePrefixed(styletron, {
flexDirection: 'row'
}),
color0: injectStylePrefixed(styletron, {
backgroundColor: '#222'
}),
color1: injectStylePrefixed(styletron, {
backgroundColor: '#666'
}),
color2: injectStylePrefixed(styletron, {
backgroundColor: '#999'
}),
color3: injectStylePrefixed(styletron, {
backgroundColor: 'blue'
}),
color4: injectStylePrefixed(styletron, {
backgroundColor: 'orange'
}),
color5: injectStylePrefixed(styletron, {
backgroundColor: 'red'
}),
fixed: injectStylePrefixed(styletron, {
width: '20px',
height: '20px'
})
};
export default Box;function StyledComponent(props, context) {
const newProps = assign({}, props);
const styles = resolveStyles(stylesArray, props, context);
const className = injectStylePrefixed(context.styletron, styles);
newProps.className = props.className
? `${props.className} ${className}`
: className;
if (isFunction(props.innerRef)) {
newProps.ref = props.innerRef;
delete newProps.innerRef;
}
return createElement(name, newProps);
}styletron-utils
Generic helper utilities for Styletron
