✨ Handy Providers for Emotion / Styled Components
MIT License
Handy Providers for Emotion / Styled Components
npm install --save styled-providers
Emotion and Styled Components are supported.
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>
);
};
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>
);
};
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.
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>
);
};
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.
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
)