reactjs - TypeError：无法使用样式组件读取未定义的属性“颜色”

问题描述

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

发生错误是因为我没有在其他相应组件的样式中输入相同数量的属性。

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

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

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

示例 2：

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

我的风格.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;

我的成分指数：

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;

标签： reactjsstyled-components

reactjs - TypeError：无法使用样式组件读取未定义的属性“颜色”

问题描述

解决方案

推荐阅读