在子组件的最外层元素中添加了类名main并在类中添加了背景颜色为红色
在父组件的最外层元素中也添加了类名main并在类中添加了背景颜色为黄色
实际上页面中显示的子组件中盒子颜色为黄色
搞不清楚为什么
可以使用 css module解决 。或者给子组件 加个 父类名
该回答引用ChatGPT
子组件背景颜色显示为黄色可能是因为父组件定义的样式优先级高于子组件定义的样式。通常，父组件中定义的样式将覆盖子组件中定义的样式，因为它们在同一级别，而父组件中定义的样式具有更高的优先级。
要解决这个问题，您可以在子组件的样式中使用特殊选择器来指定该样式只应用于该子组件。例如：
.ChildComponent .main {
background-color: red;
}
这样，该样式将只应用于类名为“ChildComponent”的元素的子元素，而不会被父组件的样式所覆盖。
不知道你这个问题是否已经解决, 如果还没有解决的话: