Styling props

packages/mdx/src/mdx-client/scrollycoding.scss

@@ -2,11 +2,11 @@
   display: flex;
   position: relative;
   margin: 1rem 0;
+  gap: 1rem;
 }
 
 .ch-scrollycoding-content {
   box-sizing: border-box;
-  padding-right: 16px;
   flex: 1;
 }
 

packages/mdx/src/mdx-client/scrollycoding.tsx

@@ -11,13 +11,17 @@ export function Scrollycoding({
   codeConfig,
   presetConfig,
   start = 0,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   start?: number
   presetConfig?: PresetConfig
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -58,7 +62,8 @@ export function Scrollycoding({
     <section
       className={`ch-scrollycoding ${
         presetConfig ? "ch-scrollycoding-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-scrollycoding-content">
         <Scroller onStepChange={onStepChange}>

packages/mdx/src/mdx-client/section.tsx

@@ -16,9 +16,13 @@ const SectionContext = React.createContext<{
 
 export function Section({
   children,
+  className,
+  style,
   ...props
 }: {
   children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
 }) {
   const [state, setState] = React.useState<any>(props)
 
@@ -45,7 +49,10 @@ export function Section({
   const { selectedId, ...rest } = state
 
   return (
-    <section>
+    <section
+      className={`ch-section ${className || ""}`}
+      style={style}
+    >
       <SectionContext.Provider
         value={{
           props: rest,

packages/mdx/src/mdx-client/slideshow.tsx

@@ -9,13 +9,17 @@ export function Slideshow({
   codeConfig,
   presetConfig,
   code,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   presetConfig?: PresetConfig
   code?: EditorProps["codeConfig"]
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -42,7 +46,8 @@ export function Slideshow({
     <div
       className={`ch-slideshow ${
         presetConfig ? "ch-slideshow-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-slideshow-slide">
         <InnerCode

packages/mdx/src/mdx-client/spotlight.scss

@@ -1,13 +1,12 @@
 .ch-spotlight {
   display: flex;
-  gap: 0.5rem;
+  gap: 1.1rem;
   margin: 1rem 0;
 }
 
 .ch-spotlight-tabs {
   display: flex;
   flex-flow: column;
-  margin-right: 10px;
   flex: 1;
   gap: 0.5rem;
   align-items: stretch;

packages/mdx/src/mdx-client/spotlight.tsx

@@ -9,13 +9,17 @@ export function Spotlight({
   codeConfig,
   start = 0,
   presetConfig,
+  className,
+  style,
   ...rest
 }: {
   children: React.ReactNode
   editorSteps: EditorStep[]
   codeConfig: EditorProps["codeConfig"]
   start?: number
   presetConfig?: PresetConfig
+  className?: string
+  style?: React.CSSProperties
 }) {
   const stepsChildren = React.Children.toArray(children)
 
@@ -38,10 +42,11 @@ export function Spotlight({
     stepsChildren[0] as React.ReactElement
 
   return (
-    <div
+    <section
       className={`ch-spotlight ${
         presetConfig ? "ch-spotlight-with-preview" : ""
-      }`}
+      } ${className || ""}`}
+      style={style}
     >
       <div className="ch-spotlight-tabs">
         {headerElement?.props?.children ? (
@@ -83,6 +88,6 @@ export function Spotlight({
           />
         )}
       </div>
-    </div>
+    </section>
   )
 }

packages/mdx/src/remark/transform.section.ts

@@ -48,6 +48,7 @@ async function transformSection(
       name: "CH.Section",
       props: props as any,
       addConfigProp: true,
+      appendProps: true,
     })
   } else {
     toJSX(node, { name: "div", props: {} })