#Custom styles not working in .mdx files

10 messages · Page 1 of 1 (latest)

bitter lion
#

Hey, I just noticed weird thing when displaying one of ours custom components. First thing I noticed was, that styles are not the same for the component in story canvas and in .mdx's canvas block. So I started digging and noticed that classes on element are not the same. First line is button from story canvas and 2nd is from .mdx page. The .mdx page has story reference using <Story of={ref.}/>. SB 7.0.0-beta.48

image.png
fluid lance
#

@heavy jewel Do you have an idea?

heavy jewel
#

I think I need a bit more context here.
Can you share your story files and your MDX files? maybe that will give a clue as to why they are different.

bitter lion
heavy jewel
#

Just paste the content in here in code fences 🙂

bitter lion
#

Story file:

import { MenuComponent } from './menu.component';
import {MatMenuModule} from "@angular/material/menu";
import {RouterTestingModule} from "@angular/router/testing";
import {MatIconModule} from "@angular/material/icon";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

const meta: Meta<MenuComponent> = {
  title: 'Design system/Molecules/Menu',
  component: MenuComponent,
  decorators: [
    moduleMetadata({
      imports: [MatMenuModule, RouterTestingModule, MatIconModule, BrowserAnimationsModule],
    }),
    componentWrapperDecorator(story => `<div style="padding-top: 10px; text-align: center">${story}</div>`)
  ],
}

export default meta;
type Story = StoryObj<MenuComponent>;

export const Basic : Story = {
  args: {
    menuItems: [
      {
        itemID: 'id1',
        itemText: 'Edit file',
        itemIcon: 'icons8-edit-file',
        itemColor: 'default',
      },
      {
      itemID: 'id2',
      itemText: 'Remove file',
      itemIcon: 'icons8-trash-can',
      itemColor: 'warn',
      }
    ]
  },
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 150
      },
      source: {
        code:``,
        language: "html",
        type: "code",
      },
    },
  }
}```

MDX file: 
```import { Canvas, Meta, Story } from '@storybook/blocks';

import * as MenuComponentStories from "../src/lib/menu/menu.component.stories";

<Meta
  name="Overview"
  of={MenuComponentStories}
/>

# Menu

Menu's description

# Examples
##

Below you can find common examples of Menu's use.

### Basic menu

Basic menu description

<Canvas>
  <Story of={MenuComponentStories.Basic}/>
</Canvas>```

I hope this is enough 🙂
heavy jewel
#

Hmm that looks quite normal. The only thing that looks off is that you're not using the correct 7.0 API for Canvas (I don't blame you, the docs are not out yet, only in the migrations).

But instead of

<Canvas>
  <Story of={...} />
</Canvas>

It's actually just

<Canvas of={...} />

Does that make it work?

bitter lion
#

Nope, still the same classes

heavy jewel
#

Can you describe how those classes are being set by your code? I don't think Storybook does anything like that.

bitter lion
#

I am not in front of PC right now but I think Angular handles those classes, I am just overriding basic styles of Angular material classes in CSS, I dont add or edit any of them in template