如何修改Amplify卡片集合组件中指定字段的字体大小？

我在Amplify中使用Figma构建了卡片集合组件，想要修改其中一个卡片集合里特定字段的字体大小（页面检查截图中高亮区域为需修改部分）。我在CSS文件中尝试了以下代码，但没有效果：

.styled-text .amplify-flex .amplify-collection .amplify-collection-items .amplify-text {
    font-size: 44px;
}

我给组件添加类名的方式如下：

<KatsuKappoCardioCardCollection className="styled-text"/>

请问我哪里操作有误？

问题分析及解决办法 #

• 选择器层级与实际DOM不匹配：你写的选择器嵌套层级可能和Amplify组件实际渲染的DOM结构不一致。打开浏览器开发者工具，直接查看目标.amplify-text元素的父级结构，调整选择器到正确的层级。
• CSS优先级不够：Amplify自带的组件样式优先级可能高于你的自定义样式。可以临时用!important测试是否生效（优先调整选择器而非依赖!important）：

.styled-text .amplify-text {
    font-size: 44px !important;
}

• 类名未正确传递到组件内部：检查KatsuKappoCardioCardCollection组件的源码，确认它是否将传入的className绑定到了包裹卡片集合的容器元素上。如果组件没正确传递这个类名，你的自定义样式根本无法作用到目标元素。
• 选择器过于冗余：不需要写多层级的选择器，直接用.styled-text .amplify-text即可，过多的层级会让样式更容易因为DOM结构变动失效。

内容的提问来源于stack exchange，提问作者Tennis Smith