web-dev-qa-db-ja.com

styled-componentsを使用したスタイルの拡張が機能しない

styled-componentsを使用して、反応コンポーネントのスタイルを拡張しようとしていますが、機能しません。私の知る限り、私はそれを正しい方法で行っていますが、おそらく何かが足りない...ここに私が持っているものがあります：

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;

もちろん、期待される結果はpの背景が赤くなることですが、現在のところ、出力は次のようになります。

enter image description here

これを解決する方法について何か考えはありますか？何かが足りないのかもしれませんが、何がわかりません。

ありがとうございます！

cssreactjsstyled-components
5
sebazelonka

それがそれを行う方法だとは知りませんでした。私はします：

    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