前提・実現したいこと
React初心者です。
業務でReactのstyled-componentsを用いて、componentsのスタイリングを行なっております。
ocmponentsはclass componentsを扱っており、
componentsを別のcomponentsで利用して、さらにスタイリングしたいと考えているのですが、
こちらの実現方法が不明なため、教えていただきたいです。。。
発生している問題・エラーメッセージ
1.class componentsにstyled-componentsを導入して、componentsをスタイリング
2.componentsをexportして、他のcomponentsで使えるようにする
3.他のcomponentsで、上記で作成したcomponentsをimportする
4.importしたcomponentに対してさらにスタイルを追加しようとする。
=> スタイルが効かない
該当のソースコード
上記の1で作成したcomponentをcomponentA,
3で記載している他のcomponentsをcompoentBとします。
※説明用に最低限のものだけ記載してます
componentA
1import React, { Component } from "react" 2import styled from "styled-components" 3 4const Icon = styled.img` 5 width: 180px; 6 height: 60px; 7`; 8 9class ComponentA extends Component { 10 render() { 11 return ( 12 <div> 13 <Icon src="hoge.png" /> 14 </div> 15 ); 16 } 17} 18 19export default styled(ComponentA)``;
componentB
1import React from "react"; 2import styled from "styled-components"; 3import ComponentA from "./ComponentA"; 4 5const RestyleComponentA = styled(ComponentA)` 6 width: 360px; 7 height: 120px; 8`; 9 10export default class ComponentB extends Component { 11 render() { 12 <div> 13 <RestyleComponentA /> 14 </div> 15 } 16} 17
試したこと
・componentA, componentBをFunctional componentにして実現できるか確認してみたが、結果変わらず
・componentAの"Icon"エレメントにclassNameを付与して、styledの中でclassNameに対してスタイルを指定するも結果変わらず。
・その他色々資料を確認してみましたが、実現したいことにたどりつかず。。。
参考 (いくつかピックアップ)
https://www.styled-components.com/docs/
https://qiita.com/kiida/items/ceac662d9a8bdd960499#override%E3%81%99%E3%82%8B
https://qiita.com/taneba/items/4547830b461d11a69a20
補足情報(FW/ツールのバージョンなど)
・React 16.4.2
・styled-components 3.4.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/29 14:33