module.less中穿插className与修改antd组件自带样式

{/* 输出 */}
        <div className={styles.outputOutside}>
          <div className={styles.outputBorder}>
            <div className={styles.outputText}>输出</div>
            {/* <div className='outputOutside_content'>输入输入输入</div> */}
            <div className={styles.outputOutside_content}>
              <Timeline>
                {outputDisplayData.map((el, index) => {
                  return (
                    // <Item key={index}>{el}</Item>
                    <Item
                      key={index}
                      style={{ width: '90%', margin: 'auto' }}
                      dot={<div className="output_list_dot"></div>}
                    >
                      {el}
                    </Item>
                  );
                })}
              </Timeline>
            </div>
          </div>
        </div>

:global {
    .output_list_dot {
      background-color: #bdc2c8;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .ant-timeline-item:hover {
      color: #0052d9;
      font-weight: 600;

      & > .ant-timeline-item-head > .output_list_dot {
        background-color: rgb(43, 150, 43);
      }
    }

    .ant-timeline-item-tail {
      position: fixed;
    }
  }