css - 以编程方式将自定义 css 设计标记添加到 material-ui 组件
问题描述
我在我的 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）到代码库（反应 UI 框架）的设计令牌
解决方案
在您的文件上使用 Css 导入并将 Css 从 Adobe Xd 共享选项卡到高级导出插件到 Variable.Css