Skip to content

StyleX by Meta

Posted on:January 10, 2024

Shortly after writing about various css-in-js solutions, Meta released their own solution called StyleX that looks pretty, pretty, pretty good.

pretty good

What Makes StyleX Stand Out?

Let’s take a look at a basic example:

const styles = stylex.create({
  base: {
    color: 'cornflowerBlue',
    fontSize: 69,
  active: {
    color: 'papayaWhip',

You define styles using stylex.create. I like this, it looks simple and familiar enough. Let’s take a look at a more complex example:

const DARK_MODE = "@media (prefers-color-scheme: dark)"

const s = stylex.create({
  body: {
    fontFamily: 'sans-serif',
    fontSize: '1rem',
    backgroundColor: {
      default: "white",
      [DARK_MODE]: "black",
    color: {
      default: "black",
      [DARK_MODE]: "white",

In this example we store the dark mode media query in a variable and set it as a condition with the style values.

To apply the styles we use stylex.props:

<body {...stylex.props(s.body)}>
      props.isActive &&,


There’s much more StyleX can do but I just wanted to give a quick overview. I’m excited to see how it evolves and how it compares to other solutions.

Edit on Github
More Posts