带自定义组件的样式化组件不适用 styles

Question

我尝试了以下代码来设置由 react-id-swiper 实现的内部元素的样式： https://kidjp85.github.io/react-id-swiper/

import Swiper from 'react-id-swiper';
import styled from 'styled-components';

    const MySwiper = ({ className, children }) => (
        <Swiper className={className} {...params}>
            {children}
        </Swiper>
    )
    
    const StyledMySwiper = styled(MySwiper)`
        .swiper-container{
            background-color: red !important;
        }
        .swiper-slide{
            background-color: red !important;
        }
        .swiper-wrapper{
            background-color: red !important;
        }
    `;

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

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;

但是 styles 没有应用。 我在这里做错了什么？

Answer 1

从StyledTestComponent中删除.h1 ，自定义 styles 将应用于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>
    );
}

您可以使用div标签或className来应用 styles，

 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
`;