web-dev-qa-db-fra.com

L'extension de styles avec des composants de style ne fonctionne pas

J'essaie d'étendre les styles d'un composant React en utilisant styled-components mais ne fonctionne pas. AFAIK, je le fais de la bonne façon, mais peut-être que je manque quelque chose ... Voici ce que j'ai:

import React from "react";
import styled from "styled-components";

const TextContainer = ({ text }) => {
  return <p dangerouslySetInnerHTML={{ __html: text }} />;
};

const Paragraph = styled(TextContainer)`
  background: red;
`;

class Home extends React.Component {
  render() {
    const { t } = this.props;
    return <Paragraph text="This is a test" />;
  }
}

export default Home;

Bien sûr, le résultat attendu est d'avoir un fond rouge sur p, mais en ce moment, la sortie ressemble à ceci:

enter image description here

Une idée sur la façon de résoudre ce problème? Il me manque probablement quelque chose, mais je ne peux pas réaliser quoi.

Merci c'est avance!

cssreactjsstyled-components
5
sebazelonka

Je ne savais pas que c'était une façon de le faire. Je ferais:

    const Link = styled.a`
    ..put you css styles here (className styles)
   `

   const StyledLink = styled(Link) `
      color: palevioletred;
      font-weight: bold;
   `

render(){
return(
<div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)
}
0
dorriz