Update 01-contexual-styles.mdx

apps/docs/docs/learn/06-recipes/01-contexual-styles.mdx

@@ -9,19 +9,22 @@ sidebar_position: 6
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+# Conditional styles based on context
 
-# Contextual styles
+StyleX lets you apply styles conditionally. Any condition can be used to do so, `Props`, `State` or `Context`. 
 
-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:
+The React Context API (and other similar APIs) can be used to avoid prop-drilling
+and provide conditions that child component can read and apply styles conditionally.
 
-### Using Context
+Context can help reduce prop-drilling by sharing state across components. This can often
+an alternative to using descendent selectors where the same results can be achieved
+*without* "styling at a distance".
 
-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:
 
 ## Defining context and styles
+
 This file sets up the `SidebarContext` and defines the styles for the sidebar in one place.
 The context provides a way to share the open/closed state, and the styles determine
 the appearance of the sidebar based on that state.
@@ -30,18 +33,7 @@ the appearance of the sidebar based on that state.
 import { createContext } from 'react';
 import * as stylex from '@stylexjs/stylex';
 
-const SidebarContext = createContext(false);
-
-const styles = stylex.create({
-  sidebarOpen: {
-    width: '250',
-  },
-  sidebarClosed: {
-    width: '50',
-  },
-});
-
-export { SidebarContext, styles };
+export default createContext(false);
 ```
 ## Building the sidebar component
 The `Sidebar` component uses the `SidebarContext` to determine its open or closed state
@@ -50,22 +42,31 @@ and conditionally applies the appropriate styles.
 ```tsx
 import React, { useContext } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { SidebarContext, styles } from './SidebarContext';
-
+import { SidebarContext } from './SidebarContext';
 
-function Sidebar({ children }: { children: React.ReactNode }) {
+export default function Sidebar({ children }) {
   const isOpen = useContext(SidebarContext);
 
   return (
-    <div {...stylex.props(isOpen ? styles.sidebarOpen : styles.sidebarClosed)}>
+    <div {...stylex.props(styles.base, isOpen ? styles.open : styles.closed)}>
       {children}
     </div>
   );
 }
 
-export default Sidebar;
+const styles = stylex.create({
+  base: {...},
+  open: {
+    width: 250,
+  },
+  closed: {
+    width: 50,
+  },
+});
 ```
+
 ## Using the sidebar in a parent component
+
 The `App` component manages the sidebar's open/closed state and provides it to
  child components through `SidebarContext.Provider`. A button toggles the sidebar state dynamically.
 
@@ -74,7 +75,7 @@ import React, { useState } from 'react';
 import SidebarContext from './SidebarContext';
 import Sidebar from './Sidebar';
 
-function App() {
+export default function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   return (
@@ -88,7 +89,5 @@ function App() {
     </SidebarContext.Provider>
   );
 }
-
-export default App;
 ```