storybook | Storybook integration with Nuxt.js | Frontend Framework library

I'm using Preact with styled-components (storybook) and webpack to build my project

I have a component called AlphaBarWrapper with a styled component inside of it called StyledAlphabar.

Styled Components is adding AlphaBarWrapper_StyledAlphaBar-sc-[random string] as a classname to my component when rendered.

I'd like this to be the standard sc-[random string] class name instead. I can't find any documentation on why it is rendering this.

This occurs in both a standard webpack build and the storybook build, so I expect that there's an option that I'm missing.

My component 'ReportWrapper' is something like below where it import 'getReportData' which in turn return data async.

I'm trying to play around with Reactjs, storybook and tailwind to create a custom UIUX library, but I cannot make work the conditional rendering of the classes, it won't work in the storybook at least (for any class, rounded, bg-color, color, etc), I cannot see any change and inspecting the CSS, no CSS is applied.

EDIT:

The classes I'm trying to add are not concatenated, they are full class names such as "bg-red-500", "bg-green-600", etc.

I have this code:

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3.vuejs.org/guide/migration/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

Current mismatch error is :

Problem

While using Storybook, I am running npm run storybook and getting the error below.

I am facing an issue where the MUI theme works in codesandbox but not in storybook

Demo to show it working WITHOUT storybook: https://codesandbox.io/s/typescript-material-ui-textfield-ojk3h?file=/src/App.tsx

Demo showing that it breaks WITH storybook Git repo: https://github.com/EdmundMai/mui-v5-storybook

This is my component:

I am migrating a library to use Angular and Material 12 (currently in version 10), and Storybook is used to expose the various components of this library. To do so, I upgraded Angular and Material to version 12 with the Angular Update Guide, Storybook to version 6.3 with npx sb upgrade and I followed the steps described here to fully migrate Storybook and use webpack5.

Unfortunately, the base.scss file previously included globally in the rendering of stories is no longer included (stories are now without any CSS). This base.scss file is included in a Typescript file with:

import '!style-loader!css-loader!sass-loader!./base.scss';

With Storybook 6.3 and Angular 10, everything works perfectly.

To fix that, I tried to add this configuration in main.js, as it is described in the documentation:

I am trying to set up a fresh next.js app using Typescript and Storybook.

Following some guides online gets me fairly close but I note that the rendered 'HomePage' story is missing styling

compared with what I get when I simply run

When I run npm ci on Github Actions I got the error: