web-dev-qa-db-ja.com

Reactコンポーネントのスタイルをスタイル付きコンポーネントでオーバーライドする

Styled-components（styled。）の標準的な方法で作成されたコンポーネントのスタイルをオーバーライドしようとしましたが、両方の方法（styled()と_style.extends_）が機能しました。

しかし、単純な反応コンポーネントのスタイルをstyled()アプローチでオーバーライドしようとすると、コンポーネントはレンダリングされますが、スタイルはオーバーライドされません。

以下はコードのスニペットです

_import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;
_

そして、表示の目的で、私は次の構文を使用しています

_<StyledMyLabel>My Styled Label</StyledMyLabel>
_

codesandboxのリンク を参照してください。

reactjsstyled-components
4
Ajax

classNameを目的のスタイリング要素に手動で渡して、機能させる必要があります。

import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label className={this.props.className}>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;

[〜＃〜]注[〜＃〜]：

必要がない場合は、独自のコンポーネントをスタイル付きコンポーネントでラップするかどうかを慎重に検討してください。小道具の自動ホワイトリストを無効にし、スタイル付きコンポーネントと構造コンポーネントの推奨順序を逆にします。

詳細情報を参照してください ここ 。

5
Denys Kotsur