Module

React.Basic.Emotion

#IsStyle 

class IsStyle a  where

Members

Instances

#IsStyleProperty 

class IsStyleProperty a  where

Members

Instances

#element 

element :: forall props. ReactComponent { className :: String | props } -> { className :: String, css :: Style | props } -> JSX

Create a JSX node from a ReactComponent, by providing the props.

This function is identical to React.Basic.element plus Emotion's css prop.

#elementKeyed 

elementKeyed :: forall props. ReactComponent { className :: String | props } -> { className :: String, css :: Style, key :: String | props } -> JSX

Create a JSX node from a ReactComponent, by providing the props.

This function is identical to React.Basic.element plus Emotion's css prop.

#css 

css :: forall r. Homogeneous r StyleProperty => Record r -> Style

#global 

global :: ReactComponent { styles :: Style }

#keyframes 

keyframes :: forall r. Homogeneous r Style => Record r -> StyleProperty

#merge 

merge :: Array Style -> Style

#int 

int :: Warn (Text "`int` is deprecated and may be removed in future versions. Prefer `str` or one of the unit combinators like `px` or `em` instead.") => Int -> StyleProperty

#num 

num :: Warn (Text "`num` is deprecated and may be removed in future versions. Prefer `str` or one of the unit combinators like `px` or `em` instead.") => Number -> StyleProperty

#var 

var :: String -> StyleProperty

Use a variable name as a property.

Define a property somewhere:

css { "--color-primary": color blue }

Use the var:

css { color: var "--color-primary" }

#px 

px :: Int -> StyleProperty

Pixels. This function does not take a Number because approaches to subpixel rendering vary among browser implementations.

#px' 

px' :: Number -> StyleProperty

Pixels and subpixels.

WARNING: Approaches to subpixel rendering vary among browser implementations. This means that non-integer pixel values may be displayed differently in different browsers.

#cm 

cm :: Number -> StyleProperty

Centimeters

#mm 

mm :: Number -> StyleProperty

Milimeters

#inches 

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

#pt 

pt :: Number -> StyleProperty

Points (1pt = 1/72 of 1in)

#pc 

pc :: Number -> StyleProperty

Picas (1pc = 12 pt)

#em 

em :: Number -> StyleProperty

Relative to the font-size of the element (2em means 2 times the size of the current font).

#ex 

ex :: Number -> StyleProperty

Relative to the x-height of the current font (rarely used).

#ch 

ch :: Number -> StyleProperty

Relative to the width of the "0" (zero) character.

#rem 

rem :: Number -> StyleProperty

Relative to font-size of the root element.

#vw 

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

#vh 

vh :: Number -> StyleProperty

Relative to 1% of the height of the viewport.

#vmin 

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

#vmax 

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

#percent 

percent :: Number -> StyleProperty

Relative to the parent element.

#px2 

px2 :: Int -> Int -> StyleProperty

#px4 

px4 :: Int -> Int -> Int -> Int -> StyleProperty

Modules