styletron-connect
npm install --save styletron-connect
What is it?
styletron-connect provides an alternative higher-level API to styletron-react.
Instead of wrapping single components in a styled() call, you add a decorator around
your entire component which will resolve a styles object and pass it through for you.
Usage
styletron-connect, like styletron-react, supports passing both a static
object and a function that takes props, and returns an object.
Static styles
import connectStyles from 'styletron-connect';
const Panel = ({ styles, children }) => (
<div className={styles.panel}>
{children}
</div>
);
export default connectStyles(Panel, {
panel: {
backgroundColor: 'lightblue',
fontSize: '12px'
}
});
<Panel>Hello World</Panel>Using props in styles
import connectStyles from 'styletron-connect';
const Panel = ({ styles, children }) => (
<div className={styles.panel}>
{children}
</div>
);
export default connectStyles(Panel, (props) => ({
panel: {
backgroundColor: props.alert ? 'orange' : 'lightblue',
fontSize: '12px'
}
}));
<Panel alert>Danger!</Panel>