扩展组件的样式组件不会使onClick发出

如何解决扩展组件的样式组件不会使onClick发出

预期行为

当我单击扩展从另一个样式组件导入的样式的按钮时，提交表单。

问题

尽管已将扩展组件应用于样式来装饰更多样式，但是此组件不能使onClick正常工作。

class User_Edit_Form extends Component {
  
    return (
      <>
        <FormArea>
          
        //   Omitted    //

          <TextLiTag>
            <SubmitButton
              btn_type="submit"
              btn_click={this.handleSubmit}
              btn_disable={!info.username || !info.email || message.username || message.email}
            >Submit
            </SubmitButton>
          </TextLiTag>
        </FormArea>
      </>
    );
  }
}

SubmitButton来自此组件。

function MiddleButton(props) {
  return (
    <StyledButton
      className={props.className}
      type={props.btn_type}
      onClick={props.btn_click}
      onSubmit={props.btn_submit}
      disabled={props.btn_disable}
    >
      {props.children}
    </StyledButton>
  );
}

export default MiddleButton;

const StyledButton = styled.button`
  height: 45px;
  width: 250px;
  font-size: 1.18em;
  font-weight: 550;
  padding: 2px 3.5px;
  border-radius: 10px;
  outline: none;
`;

export const SubmitButton = styled(StyledButton)`
  display: block;
  margin: 10px auto;
  background: ${(props) => !props.btn_disable ? '#8DD6FF' : '#E0F4FF'};
  color: ${(props) => !props.btn_disable ?  '#466A80' : '#BDCFDA' };
  Box-shadow: 4px 3px ${Colors.accent1};

  &:hover:enabled{
    background-color:#A8E0FF;
    transition: all 200ms linear;
  }

  &:active:enabled{
    Box-shadow:0px 0px 0px;
    transform: translate(4px,3px);
  }
`;

这是代码有问题。 当我看到该组件具有props的{​​{1}}时，它具有与Chrome dev tool类似的其他props。 我真的被困在这里。我尝试了所有找到的解决方案。

如果您觉得还好，我想请您教我如何解决。 非常感谢。