TypeError: Cannot read property 'color' of undefined with Styled-Components

Question

I created any component and in it I use a property called "style" and inside this property that is an object I use css styling properties.

The error occurs because I am not entering the same amount of properties within style in the other corresponding components.

I already tried to check if the props is undefined, inside my styled, but it always returns me false and the error continues ...

I would like to know how do I enter properties within the style, but is it mandatory to enter the same amount of properties for all components, or do they have the same properties?

Example 1:

   <SpotifyIcon
            name="books"
            style={{
              margin: "0 1rem 0 0",
              padding: "0.3rem",
              verticalAlign: "middle",
              fontSize: "1.4rem",
              color: "#0A0A09",
              bgColor: "#b3b3b3",
              hover: { color: "#1DB954", bgColor: "white" }
            }}
          />

Example 2:

<SpotifyIcon
        name="books"
        style={{ fontSize: "1.5rem", color: "#b3b3b3" }}
      />

MY STYLES.JS:

import styled from "styled-components";

const Icon = styled.i`
  font-family: "spotify" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: ${props => props.style.fontSize};
  margin: ${props => props.style.margin};
  padding: ${props => props.style.padding};
  vertical-align: ${props => props.style.verticalAlign};
  color: ${props => props.style.color};
  background-color: ${props => props.style.backgroundColor};
  text-transform: none;
  line-height: 1;

  :before {
    content: ${props => `"\\${props.theme.default[props.name]}"`};
  }

  :hover {
    color: ${props => props.style.hover.color};
    background-color: ${props => props.style.hover.bgColor};
  }
`;

export default Icon;

MY COMPONENTE INDEX:

import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "styled-components";

// STYLE AND THEMES
import Icon from "./styles";
import Themes from "./themes";

const SpotifyIcon = ({ name, style }) => {
  return (
    <ThemeProvider theme={Themes}>
      <Icon name={name} style={style} />
    </ThemeProvider>
  );
};

SpotifyIcon.propTypes = {
  name: PropTypes.string.isRequired,
  style: PropTypes.shape({
    margin: PropTypes.string,
    padding: PropTypes.string,
    verticalAlign: PropTypes.string,
    bgColor: PropTypes.string,
    fontSize: PropTypes.string,
    color: PropTypes.string,
    hover: PropTypes.shape({
      color: PropTypes.string,
      bgColor: PropTypes.string
    })
  }),

  checkIconName: (propObjValue, funcName, componentName) => {
    if (Themes.default[propObjValue.name] === undefined) {
      return new Error(
        `Invalid name ${
          propObjValue.name
        }, supplied to ${componentName}. Validation Failed!`
      );
    }
  }
};

export default SpotifyIcon;

Answer 1

My friends, I found the answer to my problems, so come on ..

To begin with I did something wrong, which inserted properties into the style property, where it is the inline css reserved property.

So to solve the first problem I removed the properties from inside the style and inserted it straight into the component.

The second problem complements the first, because undefined was inserted because it does not have the property, because it is inside the style property. So to solve the problem beyond the first step I entered defaultProps and that's it!