以编程方式向材质ui组件添加自定义css设计标记

我正在我的react redux应用程序中使用material ui组件。我使用adobe xd创建了UI原型，它提供了一个选项，可以将字符样式（设计标记）导出为css文件：

:root {

/* Colors: */
--text-color: #F8E29F;
--unnamed-color-6c63ff: #6C63FF;
--message-bar-avatar-panel: #3F4851;
--name-text: #A6BCD0;
--eth-subtext-stars: #748A9D;
--navbar-footer-stars-bg: #232323;
--unnamed-color-7b8188: #7B8188;
--bg-drawer: #101010;

/* Font/text values */
--unnamed-font-family-fira-sans: Fira Sans;
--unnamed-font-family-abril-fatface: Abril Fatface;
--unnamed-font-style-light: Light;
--unnamed-font-style-regular: Regular;
--unnamed-font-size-7: 7px;
--unnamed-font-size-8: 8px;
--unnamed-font-size-14: 14px;
--unnamed-font-size-16: 16px;
--unnamed-font-size-24: 24px;
--unnamed-font-size-28: 28px;
--unnamed-font-size-32: 32px;
--unnamed-character-spacing-0: 0px;
--unnamed-character-spacing-0-96: 0.96px;
--unnamed-character-spacing-1-15: 1.15px;
--unnamed-character-spacing-1-31: 1.31px;
--unnamed-line-spacing-10: 10px;
--unnamed-line-spacing-12: 12px;
--unnamed-line-spacing-20: 20px;
--unnamed-line-spacing-24: 24px;
--unnamed-line-spacing-32: 32px;
}

/* Character Styles */
.text-ultra-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-7);
line-height: var(--unnamed-line-spacing-20);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-very-small-dim-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-8);
line-height: var(--unnamed-line-spacing-10);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--eth-subtext-stars);
}
.text-very-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-8);
line-height: var(--unnamed-line-spacing-12);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-14);
line-height: var(--unnamed-line-spacing-20);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--text-color);
}
.text-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--text-color);
}
.drawer-menu-items-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-7b8188);
}
.text-secondary-dim-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--eth-subtext-stars);
}
.text-secondary-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-secondary-bold-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.heading-mobile- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-0-96);
color: var(--text-color);
}
.title-mobile- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-28);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-1-15);
color: var(--text-color);
}
.title-web- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-1-31);
color: var(--text-color);
}

---

是否有某种方法可以通过编程方式导入角色样式（和颜色样式）的自定义CSS值，以反映在我的所有材质ui组件中？例如设计标记注入之类的东西？每次我对AdobeXD原型进行更改并保存新css时，它都应该从该css导入值并反映在材质ui组件中。您还可以建议是否有更好的方法来实现从原型（adobe xd）到代码库（react UI框架）的设计标记。

在您的文件上使用Css导入，并将Css从adobe xd共享选项卡放到高级导出插件到变量。Css

您能详细介绍一下吗？adobexd共享选项卡？adobe xd的高级导出插件？你可以搜索它们