React Ant-design Modal 组件中 CSS 变量作用域问题如何解决？

Question

React+Ant-design 在Modal中的组件内使用css变量能找到，但是在Modal外使用css变量提示找不到

.small-upload {
  position: fixed;

  width: 200px;
  height: 60px;
  background: white;

  border: var(--ant-line-width) solid var(--ant-color-primary-hover);
  border-radius: var(--ant-border-radius-lg);
  //height: 100px;
}

 <div className="small-upload">
        <Progress percent={getProgress()} format={getProgressText} size="small"/>
        <ExpandAltOutlined style={{ fontSize: 20, color: token.token.colorPrimary }}/>
      </div>

<Modal>
 <div className="small-upload">
        <Progress percent={getProgress()} format={getProgressText} size="small"/>
        <ExpandAltOutlined style={{ fontSize: 20, color: token.token.colorPrimary }}/>
      </div>
</Modal>

同一个组件，在Modal内部能找到css变量，在外部却不行，是什么原因呢
Modal内的效果

Modal外的效果

Answer 1

局部作用域的CSS变量只能在定义它们的选择器或规则内部被访问。例如，仅在特定类中使用的变量应定义在该类选择器内

Answer 2

全局配置 CSS 变量隔离
‌开启 CSS 变量模式‌
通过 ConfigProvider 全局启用 CSS 变量功能，并设置唯一标识确保样式隔离：

jsx
Copy Code
// React 18 自动生成唯一 key
<ConfigProvider theme={{ cssVar: true }}>
<App />
</ConfigProvider>

// React 17/16 需手动指定 key
<ConfigProvider theme={{ cssVar: { key: 'custom-modal-key' } }}>
<App />
</ConfigProvider>
此配置可隔离不同主题或模块的样式冲突