@deskpro/deskpro-ui

Deskpro UI 组件库

文档

• 故事书
• 类型doc

使用量

支持反应 18 和 19 (react 编号 : react-dom ^18 || ^195和6部分 (单位:千美元)^5 || ^6. TypeScript消费者需要TypeScript 4.7或更晚.

# Add deskpro-ui and peer deps
pnpm add @deskpro/deskpro-ui react react-dom styled-components

# Add types
pnpm add -D @typescript/lib-dom@npm:@types/web
# styled-components 5 only (v6 ships its own types)
pnpm add -D @types/styled-components

// Optional CSS - depending which components are used from dp-ui and whether you have your own reset css
// Either download and save to an assets dir or install modern-normalize and simplebar-react as direct dependencies and reference directly from node modules
import "modern-normalize/modern-normalize.css";
import "simplebar-react/dist/simplebar.min.css";

// Required CSS
import "@deskpro/deskpro-ui/dist/deskpro-ui.css";
import "@deskpro/deskpro-ui/dist/deskpro-custom-icons.css";

import React from "react";

import { Stack, Button, lightTheme } from "@deskpro/deskpro-ui";
import { ThemeProvider } from "styled-components";

export function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <Stack>
        <Button text="hi" />
      </Stack>
    </ThemeProvider>
  );
}

键入 theme 在您自己的样式组件中, 增强样式组件' DefaultTheme数字 :

import type { DeskproTheme } from "@deskpro/deskpro-ui";

declare module "styled-components" {
  export interface DefaultTheme extends DeskproTheme {}
}

型号道具是瞬态的($(中文(简体) )

只样式组件而非 HTML 属性的道具是 $- 前缀 瞬间道具,比如说. <Stack $gap={4} $vertical $align="center"> 财务报告和审定财务报表 <TSpan type="p_p1" $themeColor="grey100">。 。 。 . 样式组件从不写 $ 给DOM的道具,所以桌上的PRO -UI不需要 StyleSheetManager 或者说 其他设置在样式的组件 5 或 6 上.