How to use radium - 10 common examples

let RadiumCards = Radium(Cards);

let RadiumMenu = Radium(Menu);
let RadiumMenuItem = Radium(MenuItem);

let RadiumComments = Radium(Comments);
let RadiumComment = Radium(Comment);

let RadiumFeed = Radium(Feed);
let RadiumEvent = Radium(Event);

let RadiumItem = Radium(Item);
let RadiumItems = Radium(Items);

let RadiumStatistic = Radium(Statistic);
let RadiumStatistics = Radium(Statistics);
let RadiumValue = Radium(Value);


// Override some components here
RadiumField.Components.Checkbox = RadiumCheckbox;
RadiumField.Components.CheckboxFields = RadiumCheckboxFields;
RadiumFields.Components.Field = RadiumField;

RadiumTr.Components.Td = RadiumTd;

RadiumMessage.Components.Icon = RadiumIcon;

RadiumBreadcrumbDivider.Components.Icon = RadiumIcon;

RadiumIconButton.Components.Icon = RadiumIcon;
RadiumIconButton.Components.Button = RadiumButton;

borderStyle: 'solid',
    boxSizing: 'border-box',
    display: 'flex',
    flexBasis: 'auto',
    flexDirection: 'column',
    flexShrink: 0,
    margin: 0,
    padding: 0,
    position: 'relative',
    // fix flexbox bugs
    minHeight: 0,
    minWidth: 0
  }
};

export default Radium(View);

<div id="{'input-placeholder-'"></div>

				

				<div style="{styles.children}">
					{children.map((child, childIndex)=&gt; {
						return ;
					})}
				</div>

			
		);
	}
});

const WrappedDiscussionItem = Radium(DiscussionItem);
export default WrappedDiscussionItem;

styles = {
	children: {
		paddingLeft: '1em',
		borderLeft: '1px solid #E0E0E0',
	},
	// wsywigBlock: {
	// 	width: '100%',
	// 	minHeight: '4em',
	// 	backgroundColor: 'white',
	// 	margin: '0 auto',
	// 	boxShadow: '0px 1px 3px 1px #BBBDC0',
	// },
	discussionHeader: {
		display: 'table',

render() {
    const {addItem, style, children} = this.props;
    const isHovered = Radium.getState(this.state, 'addItem', ':hover');
    const combinedStyle = {':hover': {}, ...styles.addButton, ...style}; // need Radium fakeout
    return <a style="{combinedStyle}">
      
      {children}
    </a>;
  }
}

"use babel";
// @flow

import * as React from "react";
import type { TaskState } from "../../TaskExecutionFeature/Types/types";
import DevToolCircle from "./DevToolCircle";
import Radium from "radium";
import electron from "electron";
import nullthrows from "nullthrows";

const remote = nullthrows(electron.remote);

let rippleAnimation = Radium.keyframes(
  {
    "0%": {
      transform: "scale(1)",
      background: "rgba(255,255,255,0)",
    },
    "50%": {
      background: "rgba(255,255,255,.2)",
    },
    "100%": {
      transform: "scale(30)",
      background: "rgba(255,255,255,0)",
    },
  },
  "ripple",
);

import Radium from 'radium'

const hoverAnimation = Radium.keyframes( {
    '0%': { backgroundColor: '#fff' },
    '100%': { backgroundColor: '#f6f8f8' }
} )

export const styles = {
    hover: {
        ':hover': {
            // Use a placeholder animation name in `animation`
            animation: '.5s linear',
            // Assign the result of `keyframes` to `animationName`
            animationName: hoverAnimation,

            backgroundColor: '#f6f8f8'
        }
    }
}

module.exports = function clientContext(cfg) {
    var userAgent = ExecutionEnvironment.canUseDOM ? window.navigator.userAgent : null;

    var plugins = [
        radium.Plugins.mergeStyleArray,
        radium.Plugins.checkProps,
        radium.Plugins.resolveMediaQueries,
        radium.Plugins.resolveInteractionStyles,
        radium.Plugins.prefix,
        prefixAll,
        radium.Plugins.checkProps
    ];

    /* eslint-disable react/no-multi-comp */
    var ClientContext = React.createClass({
        childContextTypes: {
            radiumConfig: React.PropTypes.shape({
                plugins: React.PropTypes.array,
                userAgent: React.PropTypes.string
            })
        },

function ConfiguredRadium(component) {
  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      // Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
      Radium.Plugins.keyframes,
      Radium.Plugins.visited,
      Radium.Plugins.prefix,
      // Radium.Plugins.checkProps
    ]
  })(component);
}

function ConfiguredRadium(component) {
  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      // Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
      Radium.Plugins.keyframes,
      Radium.Plugins.visited,
      Radium.Plugins.prefix,
      // Radium.Plugins.checkProps
    ]
  })(component);
}

render() {
        const {headers} = this.context;

        return (
            
                
            
        );
    }
}