✌️ Styled View
UI Primitive for React, with CSS-in-JS support
Table of contents
Installation
npm install styled-view
Usage
The <View>
component supports all of the default CSSProperties as props. The styles transformed and handled by Emotion.
import React from 'react';import View from 'styled-view'; { return <View ="#eee" => Hello </View> ;}
css
function
css
is a utility function that works with the <View />
css
prop. The API is similar to the Emotion's css prop. Unlike the css
prop, the tagged template literal allows for functions, which is handy for mixins.
import React from 'react';import css View from 'styled-view'; { const variant = variant switch variant case 'primary': return ` background-color: blue; color: white; `; default: return ` background-color: yellow; `; ; return <View ="#eee" = = > Hello </View> ;}
css
prop
<View />
accepts a special css
prop, which allows you to write styles, just like the css prop or styled component from Emotion.
import React from 'react';import View from 'styled-view'; { const css = ` &:hover { background-color: blue; color: white; } @media (min-width: 768px) { padding: 40px; } `; return <View ="#eee" = => Hello </View> ;}
sx
prop
<View />
accepts a special sx
prop, which allows you to write style objects.
import React from 'react';import View from 'styled-view'; { return <View =>Hello</View>;}
Mixins
<View />
can render mixins (function
) when passed into the css
function. This enables integration with libraries like Styled Systems. It also enable you to add your very own custom mixins!
import React from 'react';import space layout typography color from 'styled-system';import css View from 'styled-view'; // Add styled-system functions to your component { return <View = /> ;} { return <Box = ="#ddd" => Hello </Box> ;}
This concepts was inspired by James Newell ❤️!
Theming
Theming <View />
works as specified by Emotion Theming.
import React from 'react';import ThemeProvider from 'emotion-theming';import View from 'styled-view'; const theme = fontFamily: 'arial'; { return <ThemeProvider => <View>Hello</View> </ThemeProvider> ;}