DEV Community

Artem Golendukhin
Artem Golendukhin

Posted on • Updated on

Configuring StyleX in React application

#stylex #react #javascript #babel

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

Top comments (0)

Read next

leemeganj profile image

Advanced Next.js caching strategies

Megan Lee -

tanvir_ahamed profile image

Exploring the Core of true value vs false value in JavaScript...

Tanvir Ahmed -

focuscookie profile image

Tauri 2.0 - Sqlite DB - React

Stephan Lüddemann -

shafayeat profile image

Understanding JavaScript Proxy: Power of Intercepting and Customizing Operations

Shafayet Hossain -