Reactjs TypeError:无法读取属性'；颜色'；未定义样式化组件的

我创建了任何组件，在其中我使用一个名为“style”的属性，在这个属性中，我使用css样式属性作为对象

发生此错误的原因是，我在其他相应组件的样式中输入的属性数量不相同

我已经试着检查道具在我的样式中是否未定义，但它总是返回false，错误还在继续

我想知道如何在样式中输入特性，但是否必须为所有组件输入相同数量的特性，或者它们是否具有相同的特性

示例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" }
            }}
          />

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

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;

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;

我的组件索引：

   <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" }
            }}
          />

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

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;

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入{ThemeProvider}；
//风格和主题
从“/styles”导入图标；
从“/Themes”导入主题；
常量SpotifyIcon=（{name，style}）=>{
返回(
);
};
SpotifyIcon.propTypes={
名称：PropTypes.string.isRequired，
样式：PropTypes.shape({
边距：PropTypes.string，
填充：PropTypes.string，
垂直对齐：PropTypes.string，
bgColor:PropTypes.string，
fontSize:PropTypes.string，
颜色：PropTypes.string，
悬停：PropTypes.shape({
颜色：PropTypes.string，
bgColor:PropTypes.string
})
}),
checkIconName：（propObjValue、funcName、componentName）=>{
if（Themes.default[propObjValue.name]==未定义）{
返回新错误(
`无效名称${
propObjValue.name
}，提供给${componentName}。验证失败`
);
}
}
};
导出默认的SpotifyIcon；

我的朋友们，我找到了问题的答案，所以来吧

首先，我做了一些错误的事情，将属性插入到样式属性中，其中是内联css保留属性

为了解决第一个问题，我从样式内部删除了属性，并将其直接插入到组件中

---

第二个问题补充了第一个问题，因为插入undefined是因为它没有属性，因为它在style属性中。为了解决第一步之外的问题，我输入了defaultProps，就这样

我的朋友们，我找到了问题的答案，所以来吧

首先，我做了一些错误的事情，将属性插入到样式属性中，其中是内联css保留属性

为了解决第一个问题，我从样式内部删除了属性，并将其直接插入到组件中

---

第二个问题补充了第一个问题，因为插入undefined是因为它没有属性，因为它在style属性中。为了解决第一步之外的问题，我输入了defaultProps，就这样

代码看起来不错，也许你在其他地方应用了不同的样式？所以。。关键是这一点。对于与上述示例相同的组件，我在其中一个组件中应用的样式比在另一个组件中应用的样式多，他给出了undefined，但即使转到styles.js并对undefined执行三元也是没有用的。你能展示该组件吗？你能在CodeSanbox上提供一个功能最少的示例吗？代码看起来不错，也许你在其他地方使用了不同的风格？所以。。关键是这一点。对于与上述示例相同的组件，在其中一个组件中，我应用的样式比在另一个组件中应用的样式多，他给出了undefined，但即使转到styles.js并对undefined执行三元也是没有用的。您能展示该组件吗？您能提供一个在CodeSanbox上具有最小功能的示例吗？