将 figma 文件集成到角度材料中

Question

我有一些从 figma 生成的文件。一个插件已用于材料设计。

我有一个文件夹 css

colors.module.css
theme.dark.css
theme.ligh.css
tokens.css
typography.module.css

我没有关于如何将其与角材料集成的任何信息

Answer 1

您可以尝试按照以下步骤解决您的问题：

将 css 文件夹的内容复制到 Angular 项目的资产文件夹中。

在 Angular 组件的样式中导入 CSS 文件。例如，如果你想在组件中使用typography.module.css文件，你可以在组件的.component.css文件中添加以下行：

@import 'assets/typography.module.css';

如果你想使用 Figma 文件中定义的颜色和标记，你可以创建一个新的 Angular Material 主题并导入相关的 CSS 文件。以下是如何创建新主题的示例：

// In styles.scss
@import '~@angular/material/theming';
@import 'assets/colors.module.css'; // Import the colors CSS file
@import 'assets/tokens.css'; // Import the tokens CSS file

// Define the new theme
$my-theme: mat.define-theme((
  color: (
    primary: $my-primary-color,
    accent: $my-accent-color,
    // Define other colors here
  ),
  typography: (
    // Define typography styles here
  ),
));


// Use the new theme in your app
@include mat.all-component-themes($my-theme);

定义新主题后，您可以通过将 mat-theme 指令应用于适当的元素来在 Angular 组件中使用它。例如： 网页格式

<mat-card mat-theme="my-theme">
  <!-- Card content goes here -->
</mat-card>

希望这个答案有所帮助。