[React Style] ReactStyle

Table of Contents

• React Style feature
• React Style codesandbox
• React Style parameters (Basic Usage)
  • CSS
  • CSS Selector
  • CSS ID
• How to use React Style?
  • Inject
  • lazyInjext

React Style feature

Most of CSS use case.

• Inline style

• CSS selector

  • Keyframes

  • Media query

  • CSS hack

• Server side support

React Style codesandbox

• https://codesandbox.io/s/03j05q5kjn

React Style parameters (Basic Usage)

https://github.com/react-atomic/react-atomic-molecule/blob/master/src/lib/styles/index.js#L23

import {reactStyle} from 'react-atomic-molecule';

reactStyle({...css}, css-selector, css-id);

CSS

• CSS style in javascript hashmap.

CSS Selector

• Any CSS selector.

• How To Use Keyframes?

• How to create media query CSS?

• How to use CSS hack?

• How to always force use inline-style

CSS ID

• Unique id to create css object, if empty will auto create one.

How to use React Style?

Inject

• Inject by SemanticUI Tag

• https://codesandbox.io/s/03j05q5kjn

• Custom call inject function.

  import {
      reactStyle,
      injectStyle
  } from 'react-atomic-molecule';
  injectStyle();

lazyInjext

• Lazy Inject