StyleSheetManager.d.ts 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import React from 'react';
  2. import type stylis from 'stylis';
  3. import StyleSheet from '../sheet';
  4. import { InsertionTarget, ShouldForwardProp, Stringifier } from '../types';
  5. export declare const mainSheet: StyleSheet;
  6. export declare const mainStylis: Stringifier;
  7. export type IStyleSheetContext = {
  8. shouldForwardProp?: ShouldForwardProp<'web'> | undefined;
  9. styleSheet: StyleSheet;
  10. stylis: Stringifier;
  11. };
  12. export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
  13. export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
  14. export type IStylisContext = Stringifier | void;
  15. export declare const StylisContext: React.Context<IStylisContext>;
  16. export declare const StylisConsumer: React.Consumer<IStylisContext>;
  17. export declare function useStyleSheetContext(): IStyleSheetContext;
  18. export type IStyleSheetManager = React.PropsWithChildren<{
  19. /**
  20. * If desired, you can pass this prop to disable "speedy" insertion mode, which
  21. * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
  22. * When disabled, rules are inserted as simple text into style blocks.
  23. */
  24. disableCSSOMInjection?: undefined | boolean;
  25. /**
  26. * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
  27. * to reduce the weight of CSS on the page.
  28. */
  29. enableVendorPrefixes?: undefined | boolean;
  30. /**
  31. * Provide an optional selector to be prepended to all generated style rules.
  32. */
  33. namespace?: undefined | string;
  34. /**
  35. * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
  36. */
  37. sheet?: undefined | StyleSheet;
  38. /**
  39. * Starting in v6, styled-components no longer does its own prop validation
  40. * and recommends use of transient props "$prop" to pass style-only props to
  41. * components. If for some reason you are not able to use transient props, a
  42. * prop validation function can be provided via `StyleSheetManager`, such as
  43. * `@emotion/is-prop-valid`.
  44. *
  45. * When the return value is `true`, props will be forwarded to the DOM/underlying
  46. * component. If return value is `false`, the prop will be discarded after styles
  47. * are calculated.
  48. *
  49. * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will
  50. * override this default.
  51. */
  52. shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];
  53. /**
  54. * An array of plugins to be run by stylis (style processor) during compilation.
  55. * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).
  56. *
  57. * \* The plugin(s) must be compatible with stylis v4 or above.
  58. */
  59. stylisPlugins?: undefined | stylis.Middleware[];
  60. /**
  61. * Provide an alternate DOM node to host generated styles; useful for iframes.
  62. */
  63. target?: undefined | InsertionTarget;
  64. }>;
  65. export declare function StyleSheetManager(props: IStyleSheetManager): React.JSX.Element;