Реагировать Styled-Компоненты прохождения вопроса реквизита

Question

Попытка создать вложенный компонент, который принимает несколько аргументов, например. стили для кнопки, стили для текста и возможного значка. Все (прохождение реквизита) работает нормально, если я непосредственно отрисовываю кнопку.

Ниже код, который я написал

import React from "react";
import styled from "styled-components";
import _ from "lodash";
import { hexToRgb } from "../styles/helpers";
import * as MaterialIcons from "styled-icons/material";

const StyledButton = styled.button`
  text-align: center;
  border: ${props =>
    props.outline ? `1px solid ${props.outlineColor}` : "none"};
  background: ${props => (props.background ? props.background : "#000")};
  border-color: ${props =>
    props.outlineColor ? props.outlineColor : "transparent"};
  min-width: 120px;
  width: ${props => (props.width ? props.width : "auto")};
  min-height: 40px;
  border-radius: 25px;
  color: ${props => (props.color ? props.color : "#FFF")};
  transition: all ease 0.5s;
  &:hover {
    cursor: pointer;
    background: ${props =>
      props.background ? hexToRgb(props.background) : "#FFF"};
  }
`;

const StyledText = styled.span`
  font-size: 16px;
  font-weight: ${props => (props.fontWeight ? props.fontWeight : 400)};
`;

const StyledIcon = styled(MaterialIcons.Lock)`
  font-size: 15;
  padding: 10px;
`;

const Button = props => {
  let _icon = null;
  const { children, icon } = props;
  console.log("props", props);

  if (icon) {
    _icon = <StyledIcon size="48" title="Test icon" />;
  }

  console.log("StyledButton", StyledButton);

  return (
    <StyledButton>
      <StyledText>{children}</StyledText>
      {_icon}
    </StyledButton>
  );
};

export default Button;

Если я напрямую экспортирую StyledButton по умолчанию, он работает нормально.

Answer 1

По какой-то странной причине реквизиты не были переданы в StyledComponent, однако напрямую указывается, что я хочу, работает.

   return (
    <StyledButton
      outlineColor={outlineColor}
      background={background}
      width={width}
      color={color}
      outline={outline}
    >
      <StyledText>{children}</StyledText>
      {_icon}
    </StyledButton>
  );