Javascript 带有自定义组件的已设置样式的组件未应用样式

我尝试使用以下代码对react id swiper实现的内部元素进行样式化：

从“react id Swiper”导入Swiper；
从“样式化组件”导入样式化；
常量MySwiper=（{className，children}）=>(
{儿童}
)
const StyledMySwiper=styled（mysweer）`
.swiper容器{
背景色：红色！重要；
}
.滑梯{
背景色：红色！重要；
}
.泳衣{
背景色：红色！重要；
}
`;

然后在我的组件中使用它：

function CustomSwiper(props) {
    return (
            <StyledMySwiper>
                <div>Slide #1</div>
                <div>Slide #2</div>
                <div>Slide #3</div>
                <div>Slide #4</div>
                <div>Slide #5</div>
            </StyledMySwiper>
    );
}

export default CustomSwiper;

功能自定义开关（道具）{
返回(
幻灯片#1
幻灯片#2
幻灯片#3
幻灯片#4
幻灯片#5
);
}
导出默认CustomSwiper；

但是这些样式没有被应用。

---

我做错了什么？

从

StyledTestComponent

中删除

.h1

，自定义样式将应用于

TestComponent

const StyledTestComponent = styled(MyTestComponent)`
   {
    color: red;
    font-size: 100px;
  }
`;

如果

TestComponent

具有如下子级

function TestComponent({ className }) {
    return (
        <h1 className={className}>
          <div className='child'> test div element</div> //child
            aaaaasdfsdfsd
        </h1>
    );
}

---

谢谢，但是如何通过类名覆盖内部类样式呢？对于子元素，可以使用

className

或

tagname

。更新了答案仍然不起作用，我编辑了示例，以显示我试图更改内部元素样式的组件

function TestComponent({ className }) {
    return (
        <h1 className={className}>
          <div className='child'> test div element</div> //child
            aaaaasdfsdfsd
        </h1>
    );
}

 const StyledTestComponent = styled(MyTestComponent)`
    {
    color: red;
    font-size: 100px;
  } // This will apply to the main container

  .child {
    color: green;
    font-size: 100px;
  } // This will apply to child element
`;