react-simple-flowchart库流程图元素样式定制失效问题

核心问题分析 #

你遇到的样式不生效问题，核心原因有两个：

1. 错误在chartCode中插入JSX：react-simple-flowchart基于flowchart.js实现，chartCode是用特定DSL字符串定义的，直接传入<h1>这类JSX元素会被转成[object Object]，根本不会被解析为HTML元素，自然无法生效。
2. 缺少针对operation节点的样式配置：你在initialOpt的symbols里只配置了start/end节点，没给operation节点设置文本样式；且库本身没有内置文本居中的配置项，需要通过CSS强制覆盖。

具体修复步骤 #

1. 修正linkStatus的文本格式（实现加粗） #

把JSX替换为flowchart.js支持的HTML标签，直接在chartCode字符串中定义：

// 替换原来的linkStatus定义
const linkStatus = `<strong>${item.LinkStatus || 'default'}</strong>`;

2. 配置operation节点的默认样式 #

在initialOpt的symbols中添加operation的样式配置，确保文本加粗生效：

const initialOpt = {
  // ... 原有配置
  symbols: {
    start: { /* 原有配置 */ },
    end: { /* 原有配置 */ },
    // 新增operation节点样式
    operation: {
      'font-weight': 'bold',
      'font-color': '#333'
    }
  },
  // ... 原有配置
};

3. 通过CSS实现文本居中 #

因为库没有内置文本居中的配置，需要用CSS强制覆盖节点文本的对齐方式。在组件所在的CSS文件中添加：

/* 针对operation节点文本居中 */
.flowchart .operation text {
  text-align: center !important;
  dominant-baseline: middle !important; /* 可选，实现垂直居中 */
}

如果选择器优先级不够，可添加父容器类名提升优先级，比如：

.your-flow-container .flowchart .operation text {
  text-align: center !important;
}

4. 确保chartCode格式正确 #

保持原有拼接逻辑，只要linkStatus是纯字符串格式即可，无需额外修改。

完整修正后的关键代码片段 #

// 修正后的generateChartCode部分
const generateChartCode = (data: DataType[]): string => {
  if (data.length === 0) return 'st=>start: No Data\nst->e\n';

  const steps: string[] = [];
  let prevTaskStatus = '';

  data.forEach((item, index) => {
    const taskStatus = item.TaskStatus || 'default';
    const taskAssignTo = item.TaskAssignTo.join(', ').replace(/\s+/g, '_');
    const taskUrl = item.TaskUrl;
    // 用HTML strong标签实现加粗
    const linkStatus = `<strong>${item.LinkStatus || 'default'}</strong>`;
    let displayStatus = taskStatus;

    if (index === 0 && taskStatus === 'Not Started') {
      displayStatus = 'In Progress';
    } else if (taskStatus === 'Not Started' && (index === 0 || prevTaskStatus === 'Completed')) {
      displayStatus = 'In Progress';
    }

    steps.push(`op${index + 1}=&gt;operation: ${linkStatus}\n(${taskAssignTo})|${displayStatus}:&gt;${taskUrl}[blank]\n`);
    prevTaskStatus = taskStatus;
  });

  // ... 原有逻辑不变
};

// 修正后的initialOpt
const initialOpt = {
  // ... 原有配置
  symbols: {
    start: {
      'font-color': '#b84d51',
      'element-color': '#72ed91',
      'font-weight': 'bold',
    },
    end: {
      'font-color': '#b84d51',
      'element-color': '#72ed91',
      'font-weight': 'bold',
    },
    operation: {
      'font-weight': 'bold',
      'font-color': '#333'
    }
  },
  // ... 原有配置
};

额外注意事项 #

• 若HTML标签不生效，可尝试直接通过symbols.operation的font-weight: bold全局控制operation节点文本加粗，部分旧版本库对HTML支持有限。
• 检查CSS是否被其他样式覆盖，可通过浏览器开发者工具查看元素样式，调整选择器优先级。

内容的提问来源于stack exchange，提问作者Denys Kravchenko