How to use styletron-react - 10 common examples
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 / inferred-deep-composition.js View on Github 
// @flow
import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";
// Note: explicit generic annotation is here because this is not inferred correctly
const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
color: "red",
}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
;
const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe// @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// @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 foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz
;
const Qux = withStyle(Baz, (_props: {qux: "qux"}) => ({color: "red"}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz
// $FlowFixMe
; // Missing qux
// $FlowFixMe),
);
// $FlowFixMe
; // missing foo and bar
// $FlowFixMe
; // missing bar
// $FlowFixMe
; // missing foo
;
const Baz = withStyle(Bar, (props: {foo: "foo", bar: "bar", baz: "baz"}) => ({
color: props.baz,
}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz// 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 = {
renderStyle: engineNoop,
renderKeyframes: engineNoop,
renderFontFace: engineNoop,
};
const App = () => (;
// withStyle()
// --------------------------
// Static Styles
const WithStyledSimple = withStyle(BasicStyled, { color: 'blue' });
;
// Dynamic Styles
interface WithStyledDynamicProps {
$crushed: boolean;
}
const WithStyledDynamic = withStyle(BasicStyled, (props: WithStyledDynamicProps) => ({
letterSpacing: props.$crushed ? '-5px' : '0',
}));
;
// withStyleDeep()
// --------------------------
// Static Styles
const WithStyledDeepSimple = withStyleDeep(BasicStyled, { color: 'blue' });
;
// Dynamic Styles
interface WithStyledDeepDynamicProps {
$crushed: boolean;import {styled, withStyle, withWrapper} from "styletron-react";
// Note: explicit generic annotation is here because this is not inferred correctly
const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
color: "red",
}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
;
const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
;
const Baz = withStyle(Bar, (_props: {baz: "baz"}) => ({color: "red"}));
// $FlowFixMe
; // Missing foorenderKeyframes: engineNoop,
renderFontFace: engineNoop,
};
const App = () => (
);
;
//
// --------------------------
const debug = new DebugEngine();
const DevApp = () => (
);
;
// useStyletron()
// --------------------------
const [css] = useStyletron();
<div>;
</div>// @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
