i'm new css , can't figure out how position 1 component inside in react. can show them separately, when put 1 inside another. don't see 1 inside. think problem in css file
#homepage{ section{ h1{ text-align: left; //this shown } //here want add other react component don't know how } } and render method:
<div id="homepage"> <component1> <section> <h1>hi</h1> <component2> </component2> </section> </component1> </div> thanks.
from understand , have classname attribute defined inside component2's html tags.
class component2 extends component{ render(){ return( <section classname="component2styles"> component2 </section > ); } } now , can change ur style sheet as
#homepage{ section{ h1{ text-align: left; //this shown } //components2 style nested here section.component2styles{ border:1px solid blue; } } } or alternative can try inline-styles , seems gaining lot of traction in react development.
render(){ var styleobj={color:'red'}; return( <section style={styleobj} > component 2 </section> ) } 