reactjs - 将父css源传递给gatsby中的子组件

Question

我的主页src/pages/index.js上有 4 个部分，以使其整洁我想将该部分分成 4 个不同的组件，比如说src/components/foo.js src/components/bar.js src/components/baz.js和src/components/qux.js

src/pages/index.js

import React from 'react';
import {graphql} from 'gatsby';
import homeStyle from '../styles/homepage.module.scss'; // how to pass this style into Foo
import Foo from '../components/foo'

const HomePage = ({data: {ipsum}}) => {
   return(
      <div>
         <Foo data={ipsum} />
      </div>
   )
}

export const loremQuery = graphql`
  query {
     ipsum: homepageYaml {
        id
        heading
     }
  }
`

export default HomePage

我的问题是如何将上面的 homeStyle（css 模块）传递/获取到下面的组件中，所以我不必在 index.js 中的每个组件上重新导入样式

src/components/foo.js

import React from 'react';

const Hero = ({data}) => {
   return(
       <h1 className={?}>{data.heading}</h1>
   )
}

export default Hero

标签： reactjsgatsby