Recipes

This section provides practical examples and patterns that demonstrate how to use StyleX for common styling scenarios.

Contextual Styles

Contextual styles are an effective way to dynamically adapt styles based on a component's state or its environment. Here are some approaches to achieve this:

Using Context

Context can help reduce prop-drilling by sharing state across components. For example, you can manage the open or closed state of a sidebar using React Context and conditionally apply styles:

import { createContext, useContext } from 'react';
import * as stylex from '@stylexjs/stylex';

const SidebarContext = createContext(false);

const styles = stylex.create({
  sidebarOpen: {
    width: '250px',
  },
  sidebarClosed: {
    width: '50px',
  },
});

function Sidebar({ children }) {
  const isOpen = useContext(SidebarContext);
  return (
    <div {...stylex.props(isOpen ? styles.sidebarOpen : styles.sidebarClosed)}>
      {children}
    </div>
  );
}

Variants

The "variants" pattern allows you to conditionally apply one of several predefined styles based on a value. This is especially useful for theming or dynamic component behavior.

Example: Button Variants

Here’s how you can create a button component with different visual styles based on a variant prop:

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

const styles = stylex.create({
  primary: {
    backgroundColor: 'blue',
    color: 'white',
    ':hover': {
      backgroundColor: 'darkblue',
    },
  },
  secondary: {
    backgroundColor: 'gray',
    color: 'white',
    ':hover': {
      backgroundColor: 'darkgray',
    },
  },
});

function Button({ variant = 'primary', ...props }) {
  return <button {...props} {...stylex.props(styles[variant])} />;
}

// Usage
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>

Hover-Dependent Descendant Styles

Using CSS variables, you can style descendants based on a parent's state, such as :hover.

Example: Nested Hover Styles

In this example, we'll apply a hover effect to a child element when the parent is hovered:

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

const styles = stylex.create({
  parent: {
    '--child-color': 'black',
    ':hover': {
      '--child-color': 'blue',
    },
  },
  child: {
    color: 'var(--child-color)',
  },
});

function ParentWithHover() {
  return (
    <div {...stylex.props(styles.parent)}>
      <span {...stylex.props(styles.child)}>Hover over me!</span>
    </div>
  );
}

Fluid, Responsive Design

The best approach to building responsive layouts is often to use fluid designs that adapt naturally to available space. This minimizes the total CSS and avoids brittle breakpoints.

Example: Fluid Grid Layout

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

const styles = stylex.create({
  row: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  column: {
    flexShrink: 0,
    flexBasis: 'auto',
    maxWidth: '100%',
  },
  fluid: {
    flexBasis: 0,
    flexGrow: 1,
  },
});

export const Col = ({ children, fluid = false }: { children: React.ReactNode; fluid?: boolean }) => (
  <div {...stylex.props(styles.column, fluid && styles.fluid)}>{children}</div>
);

export const Row = ({ children }: { children: React.ReactNode }) => (
  <div {...stylex.props(styles.row)}>{children}</div>
);

Sharing Your Recipes

We’d love to see the unique patterns and use cases you come up with! Share your recipes with the StyleX community to inspire others.