emotion-styled-utils
Styling utilities for use with emotion.
- Theme management utils, for use with emotion-theming.
- Layout utilities, including responsive breakpoints.
- Font loading and management.
- Styling fragments for use within styled components.
Installation
npm install emotion-styled-utils @emotion/core
It is recommended that you also install the following packages:
npm install @emotion/styled emotion-theming
Usage
Using reset styles, themes and font-loading:
const React = const styled = const Global css = const ThemeProvider = const loadFonts Themes resetStyles = // setup themes managerconst themes = bodyTextColor: '#000' const CustomDiv = styleddiv` ; color: ;` Component { if typeof window !== 'undefined' && !!windowdocument } { return <ThemProvider theme=themes> <Global styles= /> <CustomDiv>hello world!</CustomDiv> </ThemeProvider> }
Using style fragments:
const React = const styled = const flex smoothTransitions = const CustomDiv = styleddiv` ; ;` Component { return <CustomDiv>hello world!</CustomDiv> }
See fragments.js
for full list of available style fragments.
Using media queries:
const React = const styled = const Themes = // setup themes manager with breakpointsconst themes = {} width: mobile: '950px' desktop: '1280px' height: tall: '800px' const HideOnMobileDiv = styleddiv` display: none; { display: block; }` const HideOnDesktopDiv = styleddiv` display: block; { display: none; }` Component { return <HideOnMobileDiv>hello desktop user!</HideOnMobileDiv> <HideOnDesktopDiv>hello mobile user!</HideOnDesktopDiv> }