Вместо использования div: first-child или div: nth-of-type (2) я хотел бы сказать Row или ColSm3, как мы обычно делаем в обычном CSS, Можно ли нацелить стилизованный компонент внутри другого стилизованного компонента? или есть другой подход вместо использования div: first-child или div: nth-of-type (2) ??

Есть предложения?

Normal CSS
.ftrlinkbxs .row{margin: 0 -5px; justify-content: flex-start;}
.ftrlinkbxs .col-sm-3{padding: 0 5px; max-width: 33.33%; flex: 0 0 33.33%; }

HTML
        
Title...
Styled Components export const Ftrlinkbxs = styled.div` width: 100%; @media (min-width: 768px){ div:first-child { margin: 0 1px; } div:nth-of-type(2) { padding: 0 5px; } } `; export const Row = styled.div` .... `; export const ColSm3 = styled.div` .... `;

Ответы (1)

У вас должна быть возможность настроить таргетинг на стилизованный компонент внутри такого стилевого компонента, как этот

const Comp1 = styled.div`
   дисплей: гибкий;
`

// Может быть импортирован из другого файла
// импортируем Comp1 из './Comp1'
const Comp2 = styled.div`
   $ {Comp1} {
      цвет фона: красный;
   }
`

2022 WebDevInsider