Permalink
Dec 14, 2020
Newer
100644
45 lines (38 sloc)
1.17 KB
1
import * as React from 'react';
2
import PropTypes from 'prop-types';
3
import { StyleSheetManager } from 'styled-components';
4
5
let injectFirstNode;
6
7
export function StylesProvider(props) {
8
const { injectFirst, children } = props;
9
10
React.useEffect(() => {
11
if (injectFirst && !injectFirstNode) {
12
const head = document.head;
13
injectFirstNode = document.createElement('style');
14
injectFirstNode.setAttribute('data-styled', 'active');
15
head.insertBefore(injectFirstNode, head.firstChild);
16
}
17
18
return () => {
19
const head = document.head;
20
head.removeChild(injectFirstNode);
21
injectFirstNode = null;
22
};
23
}, [injectFirst]);
24
25
return injectFirst ? (
26
<StyleSheetManager target={injectFirstNode}>{children}</StyleSheetManager>
27
) : (
28
children
29
);
30
}
31
32
StylesProvider.propTypes = {
33
/**
34
* Your component tree.
35
*/
36
children: PropTypes.node,
37
/**
38
* By default, the styles are injected last in the <head> element of the page.
39
* As a result, they gain more specificity than any other style sheet.
40
* If you want to override Material-UI's styles, set this prop.
41
*/
42
injectFirst: PropTypes.bool,
43
};
44
45
export default StylesProvider;