allow to pass custom styles to CodeField

src/components/codefield/CodeField.tsx

@@ -9,7 +9,7 @@ import { prefixLineNumberExtension } from "./prefixLineNumberExtension";
 import { createDefaultStylesOverridesExtension } from "./defaultStylesOverridesExtension";
 import { CopyButton } from "../copy-button";
 import { BUTTON_KIND, BUTTON_SIZE } from "../button";
-import { CODE_FIELD_SIZE } from "./types";
+import { CODE_FIELD_SIZE, CustomStyles } from "./types";
 
 const MemoizedCopyButton = memo(CopyButton);
 
@@ -28,6 +28,7 @@ export type CodeFieldProps = {
   size?: CODE_FIELD_SIZE;
   codeMirrorClassName?: string;
   highlightOnHover?: boolean;
+  customStyles?: CustomStyles;
 } & HTMLAttributes<HTMLDivElement>;
 
 const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFieldProps> = (
@@ -46,14 +47,15 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
     size = CODE_FIELD_SIZE.medium,
     codeMirrorClassName,
     highlightOnHover = true,
+    customStyles = {},
     ...rest
   },
   ref
 ) => {
   const [css] = useStyletron();
   const styleOverridesExtention = useMemo(
-    () => createDefaultStylesOverridesExtension(showLineNumbers),
-    [showLineNumbers]
+    () => createDefaultStylesOverridesExtension(showLineNumbers, customStyles),
+    [showLineNumbers, customStyles]
   );
   const mergedExtensions = [styleOverridesExtention, ...extensions];
   const computedCn = className

src/components/codefield/defaultStylesOverridesExtension.ts

@@ -1,8 +1,9 @@
 import { EditorView } from "@codemirror/view";
 import { COLORS } from "../../shared";
 import { expandProperty } from "inline-style-expand-shorthand";
+import { CustomStyles } from "./types";
 
-export const createDefaultStylesOverridesExtension = (showLineNumbers: boolean) =>
+export const createDefaultStylesOverridesExtension = (showLineNumbers: boolean, customStyles: CustomStyles = {}) =>
   EditorView.theme({
     ".cm-lineNumbers .cm-gutterElement": {
       paddingLeft: "8px",
@@ -32,4 +33,5 @@ export const createDefaultStylesOverridesExtension = (showLineNumbers: boolean)
       backgroundColor: COLORS.gray900,
       ...expandProperty("transition", "background 0.15s"),
     },
+    ...customStyles,
   });

src/components/codefield/index.ts

@@ -1,3 +1,3 @@
 export { default as CodeField } from "./CodeField";
 export type { CodeFieldProps } from "./CodeField";
-export { CODE_FIELD_SIZE } from "./types";
+export { CODE_FIELD_SIZE, type CustomStyles } from "./types";

src/components/codefield/types.ts

@@ -2,3 +2,9 @@ export enum CODE_FIELD_SIZE {
   small = "small",
   medium = "medium",
 }
+
+export type CustomStyles = {
+  [selector: string]: {
+    [property: string]: string;
+  };
+};