Стилизация пользовательского компонента в Gatsby JS с использованием styled-компонентов

Question

Я недавно начал использовать Гэтсби для создания своих веб-сайтов, ранее я полагался только на простые html и css, поэтому я могу упустить что-то действительно базовое c здесь ...

Я пытаюсь стилизовать пользовательский компонент заголовка, который выглядит следующим образом

import React from "react"
import MWidth from "./m-width"

import logo from "../resources/images/logo.png"

function Header() {
   return (
      <>
         <MWidth>
            <div>
               <img src={`${logo}`}></img>
            </div>
         </MWidth>
      </>
   )
}

export default Header

после импорта его внутри компонента макета, я попытался стилизовать его с помощью styled-components примерно так

const PageHeader = styled(Header)`
   background-color: #f0f;
`

но ничего не изменилось.

Я видел, как этот подход используется с компонентом Link, но, возможно, он определен по-другому. Я что-то упустил или это просто ошибка Гэтсби?

Мой макет. js Файл выглядит следующим образом

import React from "react"
import styled from "styled-components"

import Header from "./header"
import Content from "./content"
import Footer from "./footer"

import "./common.css"

const PageHeader = styled(Header)`
   background-color: #f0f;
`

function Layout(props) {
   return (
      <>
         <PageHeader />
         <Content>{props.children}</Content>
         <Footer />
      </>
   )
}

export default Layout

Дайте мне знать, если вам нужна дополнительная информация. Любая помощь будет оценена.

Спасибо ?

Редактировать:

Оказывается, чтобы это сработало, вы необходимо прикрепить имя класса к элементу, который вы хотите стилизовать, передав его в качестве реквизита. Так что ksav предложил мне добавить props в объявление функции Header и className={props.className} в div оболочки. Теперь это выглядит так:

function Header(props) {
   return (
      <div className={props.className}>
         <MWidth>
            <div>
               <img src={`${logo}`}></img>
            </div>
         </MWidth>
      </div>
   )
}

, что по сути то же самое, что тот, который он выложил ниже. И это решило проблему.

Спасибо ?

Answer 1

Стилизация любого компонента

Метод styled отлично работает на всех ваших собственных или любых сторонних компонентах, если они прикрепляют переданный className опора для элемента DOM.

function Header({className}) {
  return (
    <div className={className}>
        <MWidth>
          <div>
            <img src={`${logo}`}></img>
          </div>
        </MWidth>
    </div>
  )
}