当前位置: 首页 > 面试题库 >

styled-components表示在您的React组件(Component)周围包装了styled()

师野
2023-03-14
问题内容

我在我的应用程序中使用样式组件在CodeSandbox中。请参考以下网址
https://lrn6vmq297.sse.codesandbox.io/

每当我进行一些更改时,控制台都会说。

Warning: PropclassNamedid not match.

It looks like you've wrapped styled() around your React component (Component), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

而且UI无法按预期呈现。有人知道我为什么遇到这个问题吗?请查看上面的网址。

谢谢


问题答案:

基本上,您需要通过this.props.className或生成props.className的解构classNamestyled- components然后将其手动应用于要设置样式的组件。否则,您不会将className应用于任何内容,因此不会看到任何样式更改。

工作示例:

components / LinkComponent.jsfunctional component接受由className创建styled()props传递给下面创建的样式化组件的,您需要将它们手动应用于该Link组件)

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

const LinkComponent = ({ className, children, link }) => (
  <Link className={className} to={link}>
    {children}
  </Link>
);

LinkComponent.propTypes = {
  className: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
  children: PropTypes.string.isRequired
};

export default LinkComponent;

components / StyledLink.js (导入functional component以上内容并将其传递给styled()您-您还可以创建样式化主题以更新styled()元素)

import styled from "styled-components";
import LinkComponent from "./LinkComponent";

const StyledLink = styled(LinkComponent)`
  color: ${props => (!props.primary && !props.danger ? "#03a9f3" : "#ffffff")};
  background-color: ${props => {
    if (props.primary) return "#03a9f3";
    if (props.danger) return "#f56342";
    return "transparent";
  }};
  font-weight: bold;
  margin-right: 20px;
  padding: 8px 16px;
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
  border: 2px solid
    ${props => {
      if (props.primary) return "#03a9f3";
      if (props.danger) return "#f56342";
      return "#03a9f3";
    }};

  &:hover {
    color: ${props => (!props.primary && !props.danger ? "#0f7ae5" : "#ffffff")};
    background-color: ${props => {
      if (props.primary) return "#0f7ae5";
      if (props.danger) return "#be391c";
      return "transparent";
    }};
    text-decoration: none;
    border: 2px solid ${props => (props.danger ? "#be391c" : "#0f7ae5")}};
  }
`;

export default StyledLink;

components / Header.js (导入StyledLink上面创建的样式化组件并加以利用-
传递给该组件的所有其他道具都将自动传递给function,但是在这种情况下,您需要解构该组件prop才能利用它)

import React from "react";
import StyledLink from "./StyledLink";

export default () => (
  <nav className="container">
    <StyledLink primary link="/">Home</StyledLink>
    <StyledLink danger link="/about">About</StyledLink>
    <StyledLink link="/portfolio">Portfolio</StyledLink>
  </nav>
);


 类似资料:
  • 我最近开始将样式化组件与React一起使用,我不确定我是否正确地处理了一个不断重复出现的特定情况。 假设我有一个非常简单的组件,比如,它只需要非常多的样式和一些给定的内容。我现在要处理的事情如下: 我发现首先定义基本组件,如,只针对样式,然后再定义另一个组件,它接受道具并使用该样式组件。 有没有更短的方法只在一个组件中完成这两个任务?我希望能有一些像... ...但那似乎不起作用。

  • 我正在使用在我的应用程序中实现一个亮/暗主题。不确定这是否太重要了,但我正在使用打字脚本。我还是一个新的反应和ts。 当组件是一个基本的HTML元素时,这是很简单的: 或者在自定义组件上(我可能拥有也可能不拥有该类型)。这里,我将从中对进行样式化: 然而,当我需要对没有显式呈现的组件进行样式化时,我会遇到麻烦。对于上面的例子,我显然在代码的某个地方有: 但是关于样式呢,比如说我自己不呈现的的子级?

  • React的主要目的就是为了界面开发的组件化,通过组件化来提高代码复用率、可维护性和可测试性。 在线实例代码如下: 上述代码中,我们使用React.createClass来创建一个新的组件(Component)。组件有一个要求,它们必须实现render函数,这个函数告诉组件要渲染什么内容。 为什么return后面要加上一对圆括号(parentheses)?这是因为如果没有的话,JS会自动在retu

  • 什么是最好的方式有3种风格类型的基础上的道具?

  • Aurelia使用组件生命周期方法来操纵组件生命周期。 在本章中,我们将向您展示这些方法并解释组件生命周期。 constructor() - 构造方法用于初始化使用类创建的对象。 首先调用此方法。 如果未指定此方法,则将使用默认构造函数。 created(owningView, myView) - 一旦创建视图和视图模型并将其连接到控制器,就会调用此方法。 此方法有两个参数。 第一个是声明组件的视

  • 组件的生命周期包含三个根据渲染方案执行的方法。 在初始渲染 init didReceiveAttrs willRender didInsertElement didRender On Re-Render didUpdateAttrs didReceiveAttrs willUpdate willRender didUpdate didRender 关于组件破坏 willDestroyElement