preset-ant-design does't work with TypeScript

[t0wer001]

What happens?
Ant Design components in Storybook does not have any styling applied to them.

It does however work if I change both the MyComponent.tsx and MyComponent.stories.tsx to MyComponent.js and MyComponent.stories.js.

I also tried adding the preset-typescript package which did not change anything.

.storybook/config.js

import { configure } from '@storybook/react'

const componentsReq = require.context('../src/components', true, /\.stories.tsx$/)

function loadStories() {
  componentsReq.keys().forEach(componentsReq)
}

configure(loadStories, module)

.storybook/presets.js

module.exports = [
  {
    name: '@storybook/preset-ant-design',
    options: {
      lessOptions: {
        modifyVars: {
          'layout-body-background': '#ffffff',
          'layout-header-background': '#ffffff',
        },
      },
    },
  },
]

[t0wer001]

I just discovered that it is only the source component (MyComponent.tsx) that needs to be either .js or .jsx for the preset to apply the styling.

Hence it is no problem that the storybook file of MyComponent uses .stories.tsx

[shilman]

Still a problem with the preset though, right?

[t0wer001]

Still a problem with the preset though, right?

Either that or it has something to do with how Storybook consumes .tsx imports when using presets (this is pure speculation though).

[SuspensionPoint]

Is there any update on how to resolve this? @antonbramsen

[t0wer001]

Is there any update on how to resolve this? @antonbramsen

@SuspensionPoint to my knowledge this has not been resolved, it has however been a long time since I looked at it and the project I worked on has since then been archived, but according to a referenced commit I have to this issue, we just ended up importing the antd/dist/antd.css in the storybook config.

And then for overriding ant design styling we used a config-overrides.js file:

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@white': '#ffffff',
      '@primary-color': '#03273B',
      '@primary-color-bright': '#FFB904',
      '@secondary-color-light': '#CCDDE3',
      '@secondary-color-medium': '#1C7690',
      '@alert': '#FF7537',
      '@text-color': '@primary-color',
      '@text-color-light': '@white',
      '@size-base': '10px',
      '@border-color-base': '@primary-color',
      '@body-background': '@secondary-color-light',
      '@layout-header-background': '@white',
      '@layout-body-background': '@white',
      '@layout-header-padding': '0',
      '@item-active-bg': '@primary-color',
      '@item-hover-bg': '@primary-color',
    },
  })
)