docs(theme): improve built-in component style (ant-design#46414)

* docs(theme): improve built-in component style * chore: update style * chore: update style --------- Co-authored-by: MadCcc <[email protected]>
SongYeongEng · Dec 18, 2023 · b7cf72d · b7cf72d
1 parent acbbbfe
commit b7cf72d
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/.dumi/theme/builtins/Container/index.tsx b/.dumi/theme/builtins/Container/index.tsx
@@ -0,0 +1,39 @@
+/**
+ * copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
+ */
+import * as React from 'react';
+import { Alert } from 'antd';
+import { type FC, type ReactNode } from 'react';
+import useStyles from './style';
+
+const Container: FC<{
+  type: 'info' | 'warning' | 'success' | 'error';
+  title?: string;
+  children: ReactNode;
+}> = ({ type, title, children }) => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <div data-type={type} className={styles.container}>
+      <Alert
+        showIcon
+        type={type}
+        message={title || type.toUpperCase()}
+        description={
+          <div
+            className={cx(
+              styles.desc,
+              // 为了让 markdown 的样式生效，需要在这里添加一个额外的 class
+              'markdown',
+            )}
+          >
+            {children}
+          </div>
+        }
+        className={styles.alert}
+      />
+    </div>
+  );
+};
+
+export default Container;
diff --git a/.dumi/theme/builtins/Container/style.ts b/.dumi/theme/builtins/Container/style.ts
@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ prefixCls, css }) => ({
+  container: css`
+      margin: 8px 0;
+    `,
+
+  alert: css`
+      .${prefixCls}-alert-message {
+        font-weight: bold;
+      }
+    `,
+
+  /* 使用 `&&` 加一点点权重 */
+  desc: css`
+       && p {
+        margin: 0;
+      }
+    `,
+}));
+
+export default useStyles;