Configuring StyleX in React application

To make StyleX working in React applications we need a babel plugin called @stylexjs/babel-plugin.
This babel plugin will be transforming StyleX code to CSS classes.

In order to use babel plugins in apps made by create-react-app we either need to eject or use react-app-rewired.
In this article we are gonna cover the second approach in 3 simple steps:

1. Install react-app-rewired

yarn add -D react-app-rewired customize-cra

1. Create config-overrides.js with the following content

const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());

1. Create .babelrc

{
    "plugins": [
      [
        "@stylexjs/babel-plugin",
        {
          "dev": true
        }
      ]
    ]
  }

Let's install StyleX packages:

yarn add -D @stylexjs/stylex @stylexjs/babel-plugin

Finally we can use StyleX:

import React from 'react'
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    width: '100%',
    color: 'red',
  },
  highlighted: {
    backgroundColor: 'green',
  },
});

function App() {
  return (
    <div {...stylex.props(styles.root, styles.highlighted)}>Content</div>
  );
}

export default App;