Как преобразовать это в styleled-компоненты и как вложить классы

Question

Я начинаю с css-in-js, используя стилевые компоненты в качестве основной библиотеки, и у меня есть 2 проблемы.

Первая проблема, как мне вложить классы?

footer{
  color: red;
}

footer p{
  padding: 16px 8px;
  font-size: 30px;
}

  <footer>
    <div className="container">
      <p>&copy; 1997-2015,All rights reserved.</p>
    </div>
  </footer>

Моя вторая проблема в том, что у меня есть div, который использует 2 класса, один в контейнере из начальной загрузки, а другой - мой собственный класс, и я не знаю, как объединить эти 2 класса в стилизованная-компонента.

Answer 1

const MyStyledComponent = styled.footer`
  & > div {
    color: red;
  }

  & > div > p {
    padding: 16px 8px;
    font-size: 30px;
  }
`;

Думайте о & как об «этом элементе».

---

Есть 2 способа добавить классы в Styled Component.Одним из них является просто добавление свойства className

<StyledComponent className="container my-class" />

или, если вы хотите использовать эти классы в любом месте вашего приложения, вы можете установить для него класс по умолчанию, установив атрибут для вашего стилизованного компонента.

const StyledComponent = styled.div.attrs({
 className: 'container my-class',
})`
  color: #f00;
`;