Hoppa till huvudinnehåll

Att utveckla med designsystemet

Installera komponenter via npm install @midas-ds/[component].

Importera och använd komponent​

Generellt, importera och använd direkt:

import { Component } from '@midas-ds/component';
...
<Component/>

För specfika instruktioner, se respektive komponent

Installera globala stilmallen​

För att komponenterna ska renderas exakt korrekt behövs lite global css. Detta finns i paketet @midas-ds/theme.

npm install @midas-ds/theme
App.tsx (rootfilen i din app)
import "@midas-ds/theme/index.css";

export default function App({children}) {
  return <main>
    {children}
  </main>
}

export default App;

Mer info finns på GitHub

Vanliga problem​

Remix​

Använder ni Remix? Då behöver ni lägga till följande i er config för att låta CSS ladda korrekt.

Remix med Vite​

vite.config.ts
export default defineConfig({
  ssr: {
    noExternal: [/^@midas-ds\/.+/],
  }
})

Äldre Remix - Classic Remix Compiler​

Följ detta: CSS Bundling och CSS Imports

root.tsx
import { cssBundleHref } from '@remix-run/css-bundle'
import type { LinksFunction } from '@remix-run/node'

// ...

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
  // ...
]
remix.config.js
// ...
export default {
  // ...
  serverDependenciesToBundle: [/^@midas-ds\/.+/],
}