✨ Styled Providers
Handy Providers for Emotion / Styled Components
Installation
npm install --save-dev styled-providers
Requirements
Usage
Emotion and Styled Components are supported.
Emotion
import React from "react";import styled from "@emotion/styled";import ScopeProvider from "styled-providers/emotion"; const View = styleddiv` background: blue;`; const App = return <div ="#app"> <ScopeProvider ="#app"> <View /> </ScopeProvider> </div> ;;Styled Components
import React from "react";import styled from "styled-components";import ScopeProvider from "styled-providers/styled-components"; const View = styleddiv` background: blue;`; const App = return <div ="#app"> <ScopeProvider ="#app"> <View /> </ScopeProvider> </div> ;;Components
FrameProvider
Provides the correct document.head to mount the <style> tag for either Emotion or Styled Components. This is necessary when rendering CSS-in-JS generated styles within elements like iFrames on runtime.
Example
import React from "react";import styled from "@emotion/styled";import FrameProvider from "styled-providers/emotion";import Frame from "react-frame-component"; const View = styleddiv` background: blue;`; const App = return <Frame> <View /> </Frame> ;;ScopeProvider
Provides a scope to prefix before generated classNames for either Emotion or Styled Components. Prefixing increases specificity, allowing for smoother integrations with pre-existing CSS rules.
Example
import React from "react";import styled from "styled-components";import ScopeProvider from "styled-providers/emotion"; const View = styleddiv` background: blue;`; const App = return <div ="#app"> <ScopeProvider ="html #app"> <View /> </ScopeProvider> </div> ;;In the above example, rendered selectors (e.g. .css-123jda) will be prefixed with html #app, resulting in selectors like html #app .css-123jda)