我在我的应用程序中使用样式组件在CodeSandbox中。请参考以下网址
https://lrn6vmq297.sse.codesandbox.io/
每当我进行一些更改时,控制台都会说。
Warning: Prop
classNamedid 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
的解构className
,styled- components
然后将其手动应用于要设置样式的组件。否则,您不会将className
应用于任何内容,因此不会看到任何样式更改。
工作示例:
components / LinkComponent.js (functional 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