styletron-react

import * as React from 'react'; import { render } from 'react-dom'; import { Provider as StyletronProvider, styled, useStyletron, DebugEngine } from 'styletron-react'; import { Client as Styletron } from 'styletron-engine-atomic'; // 1. Create a client engine instance const engine = new Styletron(); // 2. Create a debug engine instance for development const debug = process.env.NODE_ENV === 'production' ? null : new DebugEngine(); // 3. Create a styled component const RedText = styled('span', { color: 'red', fontSize: '24px', fontWeight: 'bold', ':hover': { color: 'darkred' } }); // 4. Create a functional component using the hook function MyHookComponent() { const [css] = useStyletron(); const dynamicColor = Math.random() > 0.5 ? 'blue' : 'green'; return ( <p className={css({ color: dynamicColor, fontSize: '18px', padding: '8px', backgroundColor: 'lightgray', borderRadius: '4px' })}> This text is styled with the useStyletron hook and has a {dynamicColor} color. </p> ); } // 5. Wrap your application with the StyletronProvider function App() { return ( <StyletronProvider value={engine} debug={debug}> <div> <h1>Welcome to Styletron!</h1> <RedText>This is a styled component.</RedText> <MyHookComponent /> <p> Styletron provides high-performance, atomic CSS-in-JS solutions, optimizing CSS delivery and bundle size by de-duplicating styles. </p> </div> </StyletronProvider> ); } render(<App />, document.getElementById('root'));