Javascript React样式化组件不将样式应用于自定义样式化组件

我正在使用

react-styled-components

为我的react/AntDesign应用程序中的一些自定义组件设置样式，但这些样式不应用于我的应用程序

当我尝试在一个干净的

codesandbox.io

项目中复制组件时，成功地应用了样式

虽然我的项目中的一些

样式化组件

可以工作，但这不起作用，有什么会干扰

样式化组件

代码如下：

import React from "react";
import "antd/dist/antd.css";
import styled from "styled-components";
import { FaMale, FaFemale, FaChild, FaUserFriends } from "react-icons/fa";
import { MdChildFriendly } from "react-icons/md";
import { Row, Col, Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false };
  showModal = () => {
      this.setState({
          visible: true,
      });
  };
  handleCancel = e => {
      console.log(e);
      this.setState({
          visible: false,
      });
  };
  ProductBtn = styled.div`
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      border: 1px solid #eee;
      padding: 16px;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      background-color: #fff
      p {
          margin-bottom: 0;
          margin-top: 5px;
          font-weight: bold;
      }
  `;
  render() {
      return (
          <div>
              <Button type="primary" onClick={this.showModal}>New Transaction</Button>
              <Modal
                  title="New transaction"
                  visible={this.state.visible}
                  nOk={this.handleCancel}
                  onCancel={this.handleCancel}
              >
                  <Row gutter={[16, 16]}>
                      <Col span={8}>
                          <this.ProductBtn onClick={this.handleProductClicked}>
                              <FaUserFriends style={{ fontSize: '24px' }} />
                              <p>Add couple</p>
                              <small>$70.00</small>
                          </this.ProductBtn>
                      </Col>
                      ...
                  </Row>
              </Modal>
          </div>
      )
  }
}
export default App;

从“React”导入React；
导入“antd/dist/antd.css”；
从“样式化组件”导入样式化；
从“react icons/fa”导入{FaMale、FaFemale、FaChild、fauser friends}；
从“react icons/md”导入{MdChildFriendly}；
从“antd”导入{Row，Col，Modal，Button}；
类应用程序扩展了React.Component{
状态={visible:false}；
showModal=（）=>{
这是我的国家({
可见：对，
});
};
handleCancel=e=>{
控制台日志（e）；
这是我的国家({
可见：假，
});
};
ProductBtn=styled.div`
盒影：0.15px rgba（0,0,0,0.1）；
边框：1px实心#eee；
填充：16px；
文本对齐：居中；
边界半径：5px；
光标：指针；
背景色：#fff
p{
页边距底部：0；
边缘顶部：5px；
字体大小：粗体；
}
`;
render（）{
返回(
新交易
加对

$70.00
...
)
}
}
导出默认应用程序；

以下是它的外观以及在CodeSandbox中的外观：

这就是我的应用程序中的外观，没有

ProductBtn

样式化组件上的小部件/按钮样式：

---

您的codesandbox是默认示例。@Morta1我更新了链接