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>
  );
}