以编程方式将自定义css设计标记添加到material-ui组件

Question

我在我的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值，以反映在我所有的material-ui组件中？每次我对adobe-xd原型进行更改并保存新的css时，它都应该从该css导入值并反映在material-ui组件中。您还可以建议是否有更好的方法来实现从原型(adobe-xd)到代码库(react UI框架)的设计令牌。

Answer 1

在您的文件上使用Css Import，并将Css从Adobe Xd共享选项卡放到高级导出插件到Variable.Css