将自定义类/样式传递给Gatsby (React)中的样式组件

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

// 创建样式组件
const CustomStyledComponent = styled.div`
  /* 添加自定义样式 */
  color: ${props => props.textColor};
  background-color: ${props => props.backgroundColor};
`;

// 创建一个包含样式组件的父组件
const ParentComponent = () => {
  // 定义自定义类/样式
  const customClass = "custom-class";
  const customStyle = {
    color: "red",
    backgroundColor: "blue"
  };

  return (
    <div>
      {/* 将自定义类/样式传递给样式组件 */}
      <CustomStyledComponent className={customClass} style={customStyle}>
        Hello, Gatsby!
      </CustomStyledComponent>
    </div>
  );
};

export default ParentComponent;