We import <CollapsiblePanel/> into Storybook and the icon does not show correctly on the site.
I have imported:
import "@com.mgmtp.a12.widgets/widgets-core/lib/theme/basic.css";
There is a example of the visible Error of Component CollapsiblePanel, it’s icon “keyboard_arrow_down” is not shown
Kind Regard
Hi @danting-misty-mist , please have a look at our guide: Widgets Showcase, and Widgets Showcase
My guess is that you didn’t have the GlobalStyle imported.
Another reason could be that storybook need to be configured in order to load the icon font properly.
GlobalStyles is imported.
And yes Storybook is correct configured with theme in it’s dectorater.
The problem here is that, I don’t use this component in the Story area, I use it on it’s customizable doc site. And there is the area where the styles of storybook also impacts. The definition of font-family from storybook styling penetrates globally overall. Even I directly wrapp this component into ThemeProvider with GlobalStyles in it, that can not override the font styling of storybook itself.
I didn’t find a way to fix this issue except directly disable the storybook font styling in devtool xD.
Because the style class definition of storybook is much more specific, so it has higher priority in css rules.
There is a hacky way to do this like following:
const CollapsiblePanelStyled = styled(CollapsiblePanel)`
i[data-role="plasma-icon"] {
span {
font-family: "Material Icons";
}
}
`;
But in General there is no proper way to use this Widget in this specific situation. So I will just close this discourse.