How to use the styletron-react.withWrapper function in styletron-react
To help you get started, we’ve selected a few styletron-react 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 / flow-type-tests / with-wrapper-typed.js View on Github 
// @flow
import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";
const Foo = styled("div", (props: {foo: "foo"}) => ({
color: props.foo,
}));
const Bar = withWrapper(
Foo,
StyledComponent => (props: {foo: "foo", bar: "bar"}) => (
<div>
</div>
),
);
// $FlowFixMe
; // missing foo and bar
// $FlowFixMe
; // missing bar
// $FlowFixMe
; // missing foo// @flow
import * as React from "react";
import {styled, withWrapper} from "styletron-react";
const Foo = styled("div", {color: "red"});
const Bar = withWrapper(Foo, StyledComponent => props => (
<div>
</div>
));
;// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz
// $FlowFixMe
; // Missing qux
// $FlowFixMe
; // Wrong qux
;
const WrappedQux = withWrapper(Qux, StyledComponent => props => (
<div>
</div>
));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMeconst WithTransformTest = withTransform(BasicStyled, (style, props: WithTransformTestProps) => {
const display = style.display === 'none' ? 'none' : props.$inline ? 'inline-flex' : 'flex';
return { ...styled, display };
});
;
// withWrapper()
// --------------------------
const PrettyButton = styled('button', { background: 'green' });
const { Consumer } = React.createContext(true);
const WithWrapped = withWrapper(PrettyButton, Styled => props => (
{value => }
));
;
// Style composition still works as normal;
const StyledWithWrapper = withStyle(WithWrapped, { background: 'red' });
;
//
// --------------------------
const engineNoop = (arg: any) => (arg ? '' : '');
const engine: StandardEngine = {
