diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index e74cd28433..d098403113 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -647,7 +647,9 @@ export type LogViewerClassKey =
 
 // @public
 export interface LogViewerProps {
-  className?: string;
+  classes?: {
+    root?: string;
+  };
   text: string;
 }
 
diff --git a/packages/core-components/src/components/LogViewer/LogViewer.tsx b/packages/core-components/src/components/LogViewer/LogViewer.tsx
index 643d2ba9f8..bdb3973015 100644
--- a/packages/core-components/src/components/LogViewer/LogViewer.tsx
+++ b/packages/core-components/src/components/LogViewer/LogViewer.tsx
@@ -34,9 +34,11 @@ export interface LogViewerProps {
    */
   text: string;
   /**
-   * The className to apply to the root LogViewer element inside the auto sizer.
+   * Styling overrides for classes within the LogViewer component.
    */
-  className?: string;
+  classes?: {
+    root?: string;
+  };
 }
 
 /**
diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
index 2f33abcd1e..cd30e96c92 100644
--- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
+++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
@@ -29,11 +29,11 @@ import { useLogViewerSelection } from './useLogViewerSelection';
 
 export interface RealLogViewerProps {
   text: string;
-  className?: string;
+  classes?: { root?: string };
 }
 
 export function RealLogViewer(props: RealLogViewerProps) {
-  const classes = useStyles();
+  const classes = useStyles({ classes: props.classes });
   const listRef = useRef<FixedSizeList | null>(null);
 
   // The processor keeps state that optimizes appending to the text
@@ -60,10 +60,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
   return (
     <AutoSizer>
       {({ height, width }) => (
-        <div
-          style={{ width, height }}
-          className={classnames(classes.root, props.className)}
-        >
+        <div style={{ width, height }} className={classes.root}>
           <div className={classes.header}>
             <LogViewerControls {...search} />
           </div>
diff --git a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
index 509e404194..0f1670bbbc 100644
--- a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
+++ b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
@@ -133,7 +133,7 @@ export const WorkflowRunLogs = ({
             <div className={classes.modalLogContainer}>
               <LogViewer
                 text={logText ?? 'No Values Found'}
-                className={classes.log}
+                classes={{ root: classes.log }}
               />
             </div>
           </Fade>
@@ -141,7 +141,7 @@ export const WorkflowRunLogs = ({
       </AccordionSummary>
       {logText && (
         <div className={classes.normalLogContainer}>
-          <LogViewer text={logText} className={classes.log} />
+          <LogViewer text={logText} classes={{ root: classes.log }} />
         </div>
       )}
     </Accordion>
diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
index e49d486ab8..dc446a55d8 100644
--- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
@@ -86,7 +86,7 @@ export const TechDocsBuildLogsDrawerContent = ({
           <Close />
         </IconButton>
       </Grid>
-      <LogViewer text={logText} className={classes.logs} />
+      <LogViewer text={logText} classes={{ root: classes.logs }} />
     </Grid>
   );
 };