styled-components 是说在你的 React 组件(组件)周围包裹了 styled() [英] styled-components is saying wrapped styled() around your React component (Component)

问题描述

我在 CodeSandbox 中有我的应用程序，使用 styled-component.请参考以下网址

components/LinkComponent.js(这个功能组件接受styled()和className生成的classNamecode>props 传递给下面创建的样式组件——您需要手动将它们应用到 Link 组件)

从react"导入React；从prop-types"导入 PropTypes；从react-router-dom"导入{链接}；const LinkComponent = ({ className, children, link }) =>(<Link className={className} to={link}>{孩子们}</链接>);LinkComponent.propTypes = {类名:PropTypes.string.isRequired，链接:PropTypes.string.isRequired，孩子:PropTypes.string.isRequired};导出默认链接组件；

components/StyledLink.js(导入上面的功能组件并将其传递给styled()——你也可以创建一个风格主题 更新styled() 元素)

从styled-components"导入样式；从./LinkComponent"导入LinkComponent；const StyledLink = styled(LinkComponent)`颜色:${props =>(!props.primary && !props.danger ? "#03a9f3" : "#ffffff")};背景颜色:${props =>{if (props.primary) 返回#03a9f3"；if (props.danger) 返回#f56342"；返回透明"；}};字体粗细:粗体；右边距:20px；填充:8px 16px；过渡:所有 0.2 秒的缓入缓出；边框半径:4px；边框:2px 实心${道具=>{if (props.primary) 返回#03a9f3"；if (props.danger) 返回#f56342"；返回#03a9f3"；}};&:悬停{颜色:${props =>(!props.primary && !props.danger ? "#0f7ae5" : "#ffffff")};背景颜色:${props =>{if (props.primary) 返回#0f7ae5"；if (props.danger) 返回#be391c"；返回透明"；}};文字装饰:无；边框:2px 实心 ${props =>(props.danger ? "#be391c" : "#0f7ae5")}};}`;导出默认 StyledLink；

components/Header.js(导入上面创建的样式化组件 StyledLink 并利用它——任何传递给该组件的额外道具将自动传递给 function，但是，在这种情况下，您需要解构 prop 以使用它)

从react"导入React；从./StyledLink"导入 StyledLink；导出默认值 () =>(<nav className="容器"><StyledLink 主链接="/">首页</StyledLink><StyledLink危险链接=/关于">关于</StyledLink><StyledLink link="/portfolio">投资组合</StyledLink></nav>);

I have my app in CodeSandbox using styled-component. Please refer the below url https://lrn6vmq297.sse.codesandbox.io/

Everytime I made some changes, the console is saying.

Warning: Prop `className` did 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.

and UI does not render as expected. Anyone has idea why I am having this issue ? Please have a look the url above.

Thanks

解决方案

Basically, you need to pass this.props.className or props.className or a deconstructed className that was generated by styled-components and manually apply it to the component you want to style. Otherwise, you're not applying the className to anything and therefore won't see any style changes.

Working example:

components/LinkComponent.js (this functional component accepts the className generated by styled() and props that were passed in to the styled component created below -- you'll need to manually apply them to the Link component)

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 (import the functional component above and pass it to styled() -- you can also create a styled themed to update styled() elements)

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 (import the styled component StyledLink created above and utilize it -- any additional props passed to this component will automatically be passed to the function, however, you'll need to, in this case, deconstruct the prop to utilize it)

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>
);

这篇关于styled-components 是说在你的 React 组件(组件)周围包裹了 styled()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！