Style Sheet Manager - Styled Components

import Table, { Row, Column } from 'components/Table' import Code from 'components/Code'

`StyleSheetManager`

A helper component for modifying how your styles are processed. For a given subtree involving styled-components, you can customize various behaviors like how the CSS runtime processor (stylis) handles styles via userland plugins and option overrides.

React Server Components (v6.3.0+): StyleSheetManager becomes a pass-through component (no-op) in RSC environments. CSS is automatically delivered via inline <style> tags. See the RSC section for details.

<Table head={['Props', 'Description']}> <Row> <Column> <Code>disableCSSOMInjection (v5+)</Code> </Column> <Column> Switches to the slower text node-based CSS injection system for adding styles to the DOM. Useful for integrating with third party tools that haven't been upgraded to consume styles from the CSSOM APIs. </Column> </Row> <Row> <Column> <Code>disableVendorPrefixes (v5, removed in v6)</Code> </Column> <Column>Opts the given subtree out of adding legacy CSS properties for rendered components.</Column> </Row> <Row> <Column> <Code>enableVendorPrefixes (v6+)</Code> </Column> <Column>Opts the given subtree into adding legacy CSS properties for rendered components.</Column> </Row> <Row> <Column> <Code>sheet</Code> </Column> <Column> <em>Thar be dragons ahead.</em> Create and provide your own StyleSheet if necessary for advanced SSR scenarios. </Column> </Row> <Row> <Column> <Code>stylisPlugins (v5+)</Code> </Column> <Column> An array of plugins to be run by stylis during compilation. Check out{' '} <a href="https://www.npmjs.com/search?q=keywords%3Astylis" target="_blank"> what's available on npm </a> . </Column> </Row> <Row> <Column> <Code>target</Code> </Column> <Column> <em>Thar be dragons ahead.</em> Provide an alternate DOM node to inject styles info. </Column> </Row> </Table>

For example if your app is intended for legacy browsers, you may want to enable vendor prefixing for your styles:

react

// import styled, { StyleSheetManager } from 'styled-components'

const Box = styled.div`
  color: ${props => props.theme.color};
  display: flex;
`

render(
  <StyleSheetManager enableVendorPrefixes>
    <Box>If you inspect me, there are vendor prefixes for the flexbox style.</Box>
  </StyleSheetManager>
)

Another example would be enabling right-to-left translation for your styles via the userland stylis-plugin-rtl plugin:

react

// import styled, { StyleSheetManager } from 'styled-components'
// import stylisRTLPlugin from 'stylis-plugin-rtl';

const Box = styled.div`
  background: mediumseagreen;
  border-left: 10px solid red;
`

render(
  <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
    <Box>My border is now on the right!</Box>
  </StyleSheetManager>
)