How to use fusion-plugin-styletron-react - 8 common examples
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.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fusionjs / fusionjs / create-fusion-app / templates / basic / content / src / pages / home.js View on Github 
// @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%',// @flow
import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';
const Panel = styled('div', {background: 'silver'});
const Styles = () => Styled component;
export default Styles;// @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',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);import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';
const Panel = styled('div', {background: 'silver'});
const Styles = () => Styled component;
export default Styles;});
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 = () => (
<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);}</style>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',
});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.
