DEV Community

Artem Golendukhin
Artem Golendukhin

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode
  1. Create config-overrides.js with the following content
const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());
Enter fullscreen mode Exit fullscreen mode
  1. Create .babelrc
{
    "plugins": [
      [
        "@stylexjs/babel-plugin",
        {
          "dev": true
        }
      ]
    ]
  }
Enter fullscreen mode Exit fullscreen mode

Let's install StyleX packages:

yarn add -D @stylexjs/stylex @stylexjs/babel-plugin
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more