🧐[问题] 在 ant design pro 中使用 flowchart 无法正确加载样式

[qcjackman]

🧐 问题描述

💻 示例代码

import React from 'react';
import { Flowchart } from '@ant-design/flowchart';
import "@ant-design/flowchart/dist/index.css";

const IndicatorNode = (props) => {
  const { size = { width: 120, height: 50 }, data } = props;
  const { width, height } = size;
  const { label = '自定义节点', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;

  return (
    <div
      className="indicator-container"
      style={{
        position: 'relative',
        display: 'block',
        background: '#fff',
        border: '1px solid #84b2e8',
        borderRadius: '2px',
        padding: '10px 12px',
        overflow: 'hidden',
        boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
        width,
        height,
        borderColor: stroke,
        backgroundColor: fill,
        color: fontFill,
        fontSize,
      }}
    >
      <div style={{ color: fontFill }}>{label}</div>
    </div>
  );
};

const DemoFlowchart = () => {
  return (
    <div style={{ height: 600 }}>
      <Flowchart
        onSave={(d) => {
          console.log(d);
        }}
        toolbarPanelProps={{
          position: {
            top: 0,
            left: 0,
            right: 0,
          },
        }}
        scaleToolbarPanelProps={{
          layout: 'horizontal',
          position: {
            right: 0,
            top: -40,
          },
          style: {
            background: 'transparent',
          },
        }}
        canvasProps={{
          position: {
            top: 40,
            left: 0,
            right: 0,
            bottom: 0,
          },
        }}
        nodePanelProps={{
          position: { width: 160, top: 40, bottom: 0, left: 0 },
          defaultActiveKey: ['custom'], // ['custom', 'official']
          registerNode: {
            title: '指标节点',
            nodes: [
              {
                component: IndicatorNode,
                popover: () => <div>指标节点</div>,
                name: 'custom-node-indicator',
                width: 120,
                height: 50,
                label: '自定义节点',
              },
            ],
          },
        }}
        detailPanelProps={{
          position: { width: 200, top: 40, bottom: 0, right: 0 },
        }}
      />
    </div>
  );
};

export default DemoFlowchart;

🚑 其他信息

ant-design-pro: 5.2.0 ant-design/flowchart: 1.1.2

[lxfu1]

依赖 antd 的样式，把antd样式也引入一下

[qcjackman]

依赖 antd 的样式，把antd样式也引入一下

像这样吗？

import React from 'react';
import { Flowchart } from '@ant-design/flowchart';
import "antd/dist/antd.css";
import "@ant-design/flowchart/dist/index.css";

...

还是不行哦

[hyzx86]

兄弟解决了吗？我这也是一样。。1.1.3.. 看起来还没你的和谐。。

[lxfu1]

提供个复现，这个问题是 antd 样式没有正确引入。

[hyzx86]

提供个复现，这个问题是 antd 样式没有正确引入。

但如果是样式问题，它不应该在控制台报错啊，不是么

[lxfu1]

提供个复现，这个问题是 antd 样式没有正确引入。

但如果是样式问题，它不应该在控制台报错啊，不是么

控制台是警告

[hyzx86]

哦哦。。 看见一片红，心发慌~~ 我抽空搞个 复现仓库

[haj1023]

解决了吗这个问题

[hyzx86]

使用umi3的antdpro 模板不能正常运行 但umi4得模板一切正常

复现仓库： https://github.com/hyzx86/antdProjTests 页面文件： https://github.com/hyzx86/antdProjTests/blob/master/src/pages/editor/flow/index.tsx 启动后地址： http://localhost:8000/editor/flow

截图：

[hyzx86]

@lxfu1 大佬，是不是这个大宝贝儿只支持 umi4了哦？

[lxfu1]

umi3的解决方案如下，主要是 webpack 打包的问题。

@import '~antd/dist/antd.less';
@import '~@ant-design/flowchart/dist/index.css';