itsjonq / styled-providers

✨ Handy Providers for Emotion / Styled Components

✨ Styled Providers

Handy Providers for Emotion / Styled Components

• Installation
• Requirements
• Usage
  • Emotion
  • Styled Components
• Components
  • FrameProvider
  • ScopeProvider

Installation

npm install --save styled-providers

Requirements

• React v16.8.0+
• Emotion v10+ or Styled Components v5+

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 = styled.div`
	background: blue;
`;

const App = () => {
	return (
		<div id="#app">
			<ScopeProvider scope="#app">
				<View />
			</ScopeProvider>
		</div>
	);
};

Styled Components

import React from "react";
import styled from "styled-components";
import { ScopeProvider } from "styled-providers/styled-components";

const View = styled.div`
	background: blue;
`;

const App = () => {
	return (
		<div id="#app">
			<ScopeProvider scope="#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 = styled.div`
	background: blue;
`;

const App = () => {
	return (
		<Frame>
			<FrameProvider>
				<View />
			</FrameProvider>
		</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 "@emotion/styled";
import { ScopeProvider } from "styled-providers/emotion";

const View = styled.div`
	background: blue;
`;

const App = () => {
	return (
		<div id="#app">
			<ScopeProvider scope="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)