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

Question

我正在使用react-styled-components在React / AntDesign应用程序中为某些自定义组件设置样式，但是这些样式未应用于我的应用程序。

当我尝试在干净的codesandbox.io项目中复制组件时，样式已成功应用。

尽管我项目中的某些styled-components确实不能正常工作，但是什么可能会干扰styled-components？

这是代码：

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;

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

这是我在应用程序中的外观，而没有ProductBtn样式的组件上类似小部件/按钮的样式：