How to use the fusion-plugin-styletron-react.styled function in fusion-plugin-styletron-react

To help you get started, we’ve selected a few fusion-plugin-styletron-react examples, based on popular ways it is used in public projects.

github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github external
// @flow
import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';

const Center = styled('div', {
  fontFamily: 'HelveticaNeue-Light, Arial',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
});

const FusionStyle = styled('div', {
  fontSize: '80px',
  color: 'rgba(0,0,0,.8)',
  paddingRight: '30px',
  display: 'flex',
});

const FullHeightDiv = styled('div', {
  height: '100%',
github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / styles.js View on Github external
// @flow
import React from 'react';

import {styled} from 'fusion-plugin-styletron-react';

const Panel = styled('div', {background: 'silver'});
const Styles = () => <Panel>Styled component</Panel>;
export default Styles;
github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github external
// @flow
import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';

const Center = styled('div', {
  fontFamily: 'HelveticaNeue-Light, Arial',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
});

const FusionStyle = styled('div', {
  fontSize: '80px',
  color: 'rgba(0,0,0,.8)',
  paddingRight: '30px',
  display: 'flex',
});

const FullHeightDiv = styled('div', {
  height: '100%',
  backgroundColor: '#FFFFFF',
});

const Circle = styled('div', {
  height: '180px',
  width: '180px',
  marginTop: '20px',
  backgroundColor: 'white',
github KevinGrandon / fusion-boilerplate / redux-boilerplate / src / pages / styles.js View on Github external
import React from 'react';

import {styled} from 'fusion-plugin-styletron-react';

const Panel = styled('div', {background: 'silver'});

import {prepared} from 'fusion-react';
import Axios from 'axios';

/*
const RPC = ({name}) => (
  <div>
    RPC DEMO {name}
  </div>
);
*/

class RPC extends React.Component {
  render() {
    const {name} = this.props;
    console.log('What props do we get', this.props.name);
github KevinGrandon / fusion-boilerplate / simple-boilerplate / src / pages / styles.js View on Github external
import React from 'react';

import {styled} from 'fusion-plugin-styletron-react';

const Panel = styled('div', {background: 'silver'});
const Styles = () => <Panel>Styled component</Panel>;
export default Styles;
github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github external
});

const Circle = styled('div', {
  height: '180px',
  width: '180px',
  marginTop: '20px',
  backgroundColor: 'white',
  ':hover': {backgroundColor: '#f0f8fa'},
  border: '10px solid #4db5d9',
  borderRadius: '50%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
});

const GettingStartedLink = styled('a', {
  textDecoration: 'none',
  color: '#4db5d9',
  fontSize: '18px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center',
  height: '100%',
});

const Home = () => (
  <FullHeightDiv>
    <style>
      {`
        html,body,#root{height:100%;}
        html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github external
const Center = styled('div', {
  fontFamily: 'HelveticaNeue-Light, Arial',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
});

const FusionStyle = styled('div', {
  fontSize: '80px',
  color: 'rgba(0,0,0,.8)',
  paddingRight: '30px',
  display: 'flex',
});

const FullHeightDiv = styled('div', {
  height: '100%',
  backgroundColor: '#FFFFFF',
});

const Circle = styled('div', {
  height: '180px',
  width: '180px',
  marginTop: '20px',
  backgroundColor: 'white',
  ':hover': {backgroundColor: '#f0f8fa'},
  border: '10px solid #4db5d9',
  borderRadius: '50%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
});
github fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github external
height: '100%',
});

const FusionStyle = styled('div', {
  fontSize: '80px',
  color: 'rgba(0,0,0,.8)',
  paddingRight: '30px',
  display: 'flex',
});

const FullHeightDiv = styled('div', {
  height: '100%',
  backgroundColor: '#FFFFFF',
});

const Circle = styled('div', {
  height: '180px',
  width: '180px',
  marginTop: '20px',
  backgroundColor: 'white',
  ':hover': {backgroundColor: '#f0f8fa'},
  border: '10px solid #4db5d9',
  borderRadius: '50%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
});

const GettingStartedLink = styled('a', {
  textDecoration: 'none',
  color: '#4db5d9',
  fontSize: '18px',

fusion-plugin-styletron-react

The Fusion plugin for Styletron, which, in addition to providing a easy-to-use styled-component-like interface, provides powerful server-side CSS optimizations, yielding less CSS code down the wire.

MIT
Latest version published 2 months ago

Package Health Score

77 / 100
Full package analysis

Popular fusion-plugin-styletron-react functions

Similar packages