Apply stylesheet variables to your React components for use in your stylesheets. Interpose reduces the clutter of React components by bridging the gap between JS and CSS without resorting to complicating your components with CSS logic.

• npm: npm install react-interpose --save

h1 {
    color: var(--colour);
}

By using the map property of the StyleProperties component — wrapping your component inside — the --colour variable can be dynamically applied with React:

import StyleProperties from 'react-interpose';

const Component = props => {

    return (
        <StyleProperties map={{ colour: props.colour }}>
            <h1 className="header">
                Hello, Interpose!
            </h1>
        </StyleProperties>
    );

};

All of the style elements are placed alongside your component's markup. By default the className and id attributes are taken into consideration when generating the selector to house the CSS variables — however you can target :root — which is highly useful when used in conjunction with Shadow DOM — by supplying isRoot={true} property to the StyleProperties component.

It's worth noting that any camel cased properties will be hyphenated – thus colourTheme will be transformed into --colour-theme.

Interpose exports the propsToStyles function which allows you to pass in a map that yields a string of CSS variables. By using this function directly you can generate your own style element within your component:

import { propsToStyles } from 'react-interpose';

export default props => {

    const styles = `
        h1.header {
            ${propsToStyles({ colour: props.colour })}
        }
    `;

    return (
        <h1 className="header">
        
            <style type="text/css">
                {styles}
            </style>
            
            Hello, Interpose!
            
        </h1>
    );

};

By using propsToStyles directly, you have greater control over the selector and the location of the style element.