[英]Using Figma Variants from React Amplify project
I was able to override props of FAQItem component present in AWS Amplify UI Kit as per amplify documentation根据放大文档,我能够覆盖AWS Amplify UI Kit中存在的FAQItem组件的道具
I now wish to create a variant of FAQItem in Figma and use it in my amplify app.我现在想在 Figma 中创建一个FAQItem的变体,并在我的放大应用程序中使用它。 The intent is to learn how to use figma variants from amplify.
目的是学习如何使用来自 amplify 的 figma 变体。 To achieve this -
为达到这个 -
I created a variant of FAQItem in Figma by clicking on "Add new Variant".我通过单击“添加新变体”在 Figma 中创建了 FAQItem 的变体。 A new variant with name "Variant2" was created.
创建了一个名为“Variant2”的新变体。 I changed the Title of variant2 FAQItem so that it visually appears different from the Default variant.
我更改了 variant2 FAQItem 的标题,使其在视觉上看起来与默认变体不同。
I synced the Figma file with my amplify project followed by amplify pull
.我将 Figma 文件与我的放大项目同步,然后是
amplify pull
。 Below snippet shows shows how the FAQItem variant was used in React app.下面的代码片段显示了如何在 React 应用程序中使用 FAQItem 变体。
import {FAQItem} from './ui-components'
...
...
<FAQItem property1= "Variant2" />
However this is not working and it renders the default variant.但是,这不起作用,它呈现默认变体。
What would be the correct way to render FAQItem variant?呈现 FAQItem 变体的正确方法是什么?
Hello The same is happening to me, I tested with the default HeroLayout1 because the variant came with the figma template but is only displaying the default variant (Light) instead of the dark one.你好 我也遇到了同样的情况,我使用默认的 HeroLayout1 进行了测试,因为该变体随 figma 模板一起提供,但仅显示默认变体(Light)而不是深色变体。
import { withAuthenticator } from "@aws-amplify/ui-react";
import Amplify from 'aws-amplify';
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from '../src/aws-exports';
import "@aws-amplify/ui-react/styles.css";
Amplify.configure(awsconfig);
//Custom UI Components
import { HeroLayout1 } from '../src/ui-components';
function Home() {
return (
<AmplifyProvider>
<HeroLayout1 mode='Dark' />
</AmplifyProvider>
)
}
export default withAuthenticator(Home);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.