J'ai mon application dans CodeSandbox en utilisant un composant de style. Veuillez vous référer à l'URL ci-dessous https://lrn6vmq297.sse.codesandbox.io/
Chaque fois que j'ai fait des changements, dit la console.
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.
et l'interface utilisateur ne s'affiche pas comme prévu. Quelqu'un a une idée pourquoi j'ai ce problème? Veuillez consulter l'url ci-dessus.
Merci
Fondamentalement, vous devez passer this.props.className
Ou props.className
Ou un className
déconstruit qui a été généré par styled-components
Et l'appliquer manuellement au composant que vous souhaitez styliser. Sinon, vous n'appliquez pas le className
à quoi que ce soit et vous ne verrez donc aucun changement de style.
Exemple de travail:
composants/LinkComponent.js (ce functional component
accepte le className
généré par styled()
et props
qui ont été transmis au composant stylisé créé ci-dessous - vous devrez les appliquer manuellement au composant 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;
composants/StyledLink.js (importez le functional component
ci-dessus et passez-le à styled()
- vous pouvez également créer a thème stylisé pour mettre à jour les éléments 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 (importez le composant stylisé StyledLink
créé ci-dessus et utilisez-le - tout accessoire supplémentaire transmis à ce composant sera automatiquement être passé au function
, cependant, vous devrez, dans ce cas, déconstruire le prop
pour l'utiliser)
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>
);
Le lien ne fonctionne pas vraiment (ou je ne comprends pas exactement ce que vous vouliez montrer), mais à partir du message d'erreur, il semble que vous devez passer className comme ceci styled(<Component className={your source for classnames} />)
J'ai eu une situation similaire où je devrais utiliser un composant créé par styled-component et transmettre la propriété css à ce composant. J'espère que cela t'aides!
Composant principal (définir la propriété CSS ici)
import Wrapper from 'components/Wrapper'
const CustomWrapper = styled(Wrapper)`
&:hover {
background-color: blue; // defining css property I want to pass down
}
`;
...
render() {
return (
... <CustomWrapper /> // using my CustomWrapper component made from 'styled-component'
)
}
`;
Wrapper.js - composant fonctionnel (utilisez le CSS défini ici)
const Wrapper = props => {
const { className } = props; // see how className is destructed and used below
return (
<div className={className}> // 'className' is used here
{YOUR_CONTENT}
</div>
)
}
Pour les composants partagés, il est préférable d'utiliser forwardRef, ou vous pouvez simplement passer des accessoires:
import React from 'react'
import styled from 'styled-components'
function MainComponent() {
return (
<LoadingStyled />
)
})
const LoadingStyled = styled(LoadingComponent)`
margin-top: 40px;
`
import React, { forwardRef } from 'react'
export const LoadingComponent = forwardRef((props, ref) => {
return (
<div {...props}>
I got all props and styles, yeeeee!
</div>
)
})
Alternative sans renvoi.
import React from 'react'
export const LoadingComponent = (props) => {
return (
<div {...props}>
I got all props and styles, yeeeee!
</div>
)
}