use CSS modules + overriding class names

src/components/Cell/Cell.tsx

@@ -1,10 +1,13 @@
 import { stringify } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
+import { cn } from '../../lib/utils.js'
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
 import Layout from '../Layout/Layout.js'
+import styles from '../TextView/TextView.module.css'
 
 interface CellProps {
   source: FileSource
@@ -19,6 +22,7 @@ export default function CellView({ source, row, col }: CellProps) {
   const [text, setText] = useState<string | undefined>()
   const [progress, setProgress] = useState<number>()
   const [error, setError] = useState<Error>()
+  const { customClass } = useConfig()
 
   // File path from url
   const { resolveUrl, requestInit, fileName } = source
@@ -69,7 +73,7 @@ export default function CellView({ source, row, col }: CellProps) {
       <Breadcrumb source={source} />
 
       {/* <Highlight text={text || ''} /> */}
-      <pre className="viewer text">{text}</pre>
+      <pre className={cn(styles.textView, customClass?.textView)}>{text}</pre>
     </Layout>
   )
 }

src/components/CellPanel/CellPanel.tsx

@@ -1,5 +1,7 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
 import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
 import SlideCloseButton from '../SlideCloseButton/SlideCloseButton.js'
 import styles from '../TextView/TextView.module.css'
@@ -18,6 +20,7 @@ interface ViewerProps {
  */
 export default function CellPanel({ df, row, col, setProgress, setError, onClose }: ViewerProps) {
   const [text, setText] = useState<string | undefined>()
+  const { customClass } = useConfig()
 
   // Load cell data
   useEffect(() => {
@@ -57,6 +60,6 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
   </>
 
   return <ContentWrapper headers={headers}>
-    <code className={styles.textView}>{text}</code>
+    <code className={cn(styles.textView, customClass?.textView)}>{text}</code>
   </ContentWrapper>
 }