| 1 | // Aphrodite server-side rendering example
|
| 2 |
|
| 3 | // Make a component that generates some styles and returns some HTML.
|
| 4 | function render() {
|
| 5 | const {StyleSheet, css} = require("aphrodite/no-important");
|
| 6 |
|
| 7 | // Make some styles
|
| 8 | const styles = StyleSheet.create({
|
| 9 | red: {
|
| 10 | color: "red",
|
| 11 |
|
| 12 | ":hover": {
|
| 13 | color: "blue",
|
| 14 | },
|
| 15 | },
|
| 16 | });
|
| 17 |
|
| 18 | // Generate some CSS with Aphrodite class names in it.
|
| 19 | return `<div class=${css(styles.red)}>
|
| 20 | Hover, and I'll turn blue!
|
| 21 | </div>`;
|
| 22 | }
|
| 23 |
|
| 24 | const {StyleSheetServer} = require("aphrodite");
|
| 25 |
|
| 26 | // Call our render function inside of StyleSheetServer.renderStatic
|
| 27 | const {css, html} = StyleSheetServer.renderStatic(() => {
|
| 28 | return render();
|
| 29 | });
|
| 30 |
|
| 31 | // Observe our output HTML and the Aphrodite-generated CSS
|
| 32 | `<style>${css.content}</style>${html}`;
|