diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
index 8513ed4c114..0e59385fe8a 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
@@ -33,4 +33,20 @@ describe('<LogMessageAnsi />', () => {
         .text()
     ).toBe('ipsum');
   });
+  it('renders string with ANSI codes with correctly converted css classnames', () => {
+    const value = 'Lorem Ipsum';
+    const wrapper = shallow(<LogMessageAnsi value={value} />);
+
+    expect(wrapper.find('span')).toHaveLength(1);
+    expect(
+      wrapper
+        .find('span')
+        .first()
+        .prop('style')
+    ).toMatchObject(
+      expect.objectContaining({
+        fontWeight: expect.any(String),
+      })
+    );
+  });
 });
diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
index 2d71a276a34..c3018116b4d 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
@@ -15,7 +15,7 @@ function convertCSSToStyle(css: string): Style {
     const match = line.match(/([^:\s]+)\s*:\s*(.+)/);
 
     if (match && match[1] && match[2]) {
-      const key = match[1].replace(/-(a-z)/g, (_, character) => character.toUpperCase());
+      const key = match[1].replace(/-([a-z])/g, (_, character) => character.toUpperCase());
       // @ts-ignore
       accumulated[key] = match[2];
     }